# Set Toggle Switch State

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

Available in: Page Flow

Toolbox Category: Input

Block Type: [Regular](https://docs.zingy.ai/app-editor/block-anatomy#regular-block)
{% endhint %}

**`Set Toggle Switch State`** is a [regular block](https://docs.zingy.ai/app-editor/block-anatomy#regular-block) that allows you to set 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.

{% hint style="success" %}
Refer to the [Set Toggle Switch State in Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/set-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%2FgdA5GCts2tpLFhngPpVV%2Fimage.png?alt=media&#x26;token=af70346d-78bd-41c5-92fd-c1c7204d92b4" alt="" width="327"><figcaption><p>Set Toggle Switch State (Mode 1)</p></figcaption></figure></div>

The Mode 1 version of the Set Toggle Switch State block consists of (from left to right):

* *Element*: [Selectable Input](https://docs.zingy.ai/app-editor/block-anatomy#selectable-input) to choose the element you want to set the state of.
* *Data*: [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts a [*boolean*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) *(true/false)* type value to set.

## 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%2Ftqgiq2QIKiogZV2dPMfH%2Fimage.png?alt=media&#x26;token=0b3eabe4-1721-4a28-92e2-b3a78a56bd66" alt="" width="327"><figcaption><p>Set Toggle Switch State (Mode 2)</p></figcaption></figure></div>

The Mode 2 version of the Set Toggle Switch State block consists of (from left to right):

* *Element*: [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.
* *Data*: [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts a [*boolean*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) *(true/false)* type value to set.

***

## Usage Examples

{% 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 %}

The image below shows an example of the Mode 1 version where the *Data* value parameter is attached to a Variable Value block configured to use the variable *b* which has been set to "true". This would toggle the switch to the "ON" position.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FvqwdpZsJtv7POo95spr4%2Fimage.png?alt=media&#x26;token=7369b979-b2fb-40c8-a071-9e9d16c49f1b" alt="" width="563"><figcaption><p>Example of Set Toggle Switch State Mode 1</p></figcaption></figure></div>

In the next example we see a Mode 2 version where the *Element* value parameter is attached to a Text block containing a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) that selects the same element. This time the *Data* value parameter is attached to the True/False block containing the value "false". This would toggle the switch to the "OFF" position.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Ft2dzdYg2e2kICcGCpAhG%2Fimage.png?alt=media&#x26;token=d95e84b4-b473-4a16-9771-819ee65f0f17" alt="" width="563"><figcaption><p>Example of Set Toggle Switch State Mode 2</p></figcaption></figure></div>

{% hint style="success" %}
NOTE: Using a CSS selector, you can operate on multiple elements that match the criteria specified by the selector. See the references below for more information:

* [Wikipedia article on CSS](https://en.wikipedia.org/wiki/CSS#Selector)
* [Mozilla Developer Network article on CSS selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)
  {% endhint %}