# Get Toggle Switch State

{% hint style="info" %}
**Block Information**

Available in: Page Flow

Toolbox Category: Input

Block Type: [Output](https://docs.zingy.ai/app-editor/block-anatomy#output-block)

Output Type: *boolean (true/false)*
{% endhint %}

**`Get Toggle Switch State`** is an [output block](https://docs.zingy.ai/app-editor/block-anatomy#output-block) that allows you to retrieve the state of [Checkbox](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/checkbox) and [Toggle Switch](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/toggle-switch) elements on a page or form. The output is of type [*boolean*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) *(true/false)* and is compatible with [Value Parameters](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) of type [*boolean*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) *(true/false)* or of type [*any*](https://docs.zingy.ai/app-editor/page-flow/references/value-types).

{% hint style="info" %}
Refer to the [Get Toggle Switch State in Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/get-toggle-switch-state-in-data-design) block for dynamically generated content.
{% endhint %}

The block comes in two modes which are discussed below.

## Mode 1 <a href="#mode-1" id="mode-1"></a>

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FAOdFHO402xRHdOW8sqgH%2Fimage.png?alt=media&#x26;token=4d7bb281-d3e4-44f3-b273-db221cba533f" alt="" width="344"><figcaption><p>Get Toggle Switch State (Mode 1)</p></figcaption></figure></div>

The Mode 1 version of the Get Toggle Switch State block consists of a [Selectable Input](https://docs.zingy.ai/app-editor/block-anatomy#selectable-input) to choose the element you want to get the state of.

## Mode 2 <a href="#mode-2" id="mode-2"></a>

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FkKOOyV1pnd5toPcATfrU%2Fimage.png?alt=media&#x26;token=29126124-954b-48fe-b0d3-1aa3b89584d3" alt="" width="294"><figcaption><p>Get Toggle Switch State (Mode 2)</p></figcaption></figure></div>

The Mode 2 version of the Get Toggle Switch State block consists of a [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts either a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value in the form of a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) or an [*element*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value[.](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) The Element block comes pre-attached for your convenience but can be removed and customized.

***

## Usage Examples

The image below shows an example of the Mode 1 version where the the variable *b* is set to the state of the selected toggle switch or checkbox element.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FgevBVV8TF8UPfY8TlkJb%2Fimage.png?alt=media&#x26;token=b43abb96-5332-43a1-998a-63b4aaa5b74f" alt="" width="563"><figcaption><p>Example of Get Toggle Switch State (Mode 1)</p></figcaption></figure></div>

In the next example we see a Mode 2 version where the variable *b* is set to the state of the selected toggle switch or checkbox element. This time the element is selected using a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors).

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F6tIhVYxYXCvpqPMHKzrU%2Fimage.png?alt=media&#x26;token=0148b2a3-7bbb-43aa-a970-a6ca028440b2" alt="" width="563"><figcaption><p>Example of Get Toggle Switch State (Mode 2)</p></figcaption></figure></div>

The next example shows a Mode 2 version, where the output of the block is used inside a If block and compared to the boolean value of true. The element itself is selected using the [Element](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/element) block.

If this condition is met, the function block do\_something is invoked.&#x20;

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Fo16xJYw57LmwvSJ2uLMu%2Fimage.png?alt=media&#x26;token=f694069d-c100-4702-9ee7-ce30024be8c7" alt="" width="563"><figcaption><p>Example of Get Toggle Switch State (Mode 2)</p></figcaption></figure></div>

Lastly we have another example with a Mode 1 version. The output is used inside a If block and compared to the boolean value of true. If this condition is met, The [Show Information Popup](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/show-information-popup) block is used to show a message that the switch is ON. The If block's else flow parameter also has a Information Popup block, but it will display the message that the switch is OFF.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Fxfb6ksPN1FewjCENdtfY%2Fimage.png?alt=media&#x26;token=7edea195-1668-4e71-882d-0711021b1441" alt="" width="563"><figcaption><p>Example of Get Toggle Switch State (Mode 1)</p></figcaption></figure></div>

{% hint style="success" %}
NOTE: The same examples also apply for a [Checkbox](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/checkbox) element.
{% endhint %}