# Toggle Switch

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F0lUbzVKZDMOvncGlPPli%2Fimage.png?alt=media&#x26;token=6341a63c-943e-4021-b0d2-0438f82eb75d" alt="" width="68"><figcaption><p>Toggle Switch Element</p></figcaption></figure></div>

The **`Toggle Switch`** element is a composite element consisting of an [Input](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input) element and a [Label](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/label) element. It is similar to the  [Checkbox](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/checkbox) element, but renders the element as a switch that can be turned on or off.

The included [Label](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/label) element is preconfigured with its [Associated Input ID](https://docs.zingy.ai/app-editor/page-editor/label#associated-input-id) set to the [Element ID](https://docs.zingy.ai/app-editor/page-element-settings#advanced-tab) of the included [Input](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input) element.

For customization options please see the [Checkbox](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/checkbox) element.

{% hint style="warning" %}
[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, used inside a Data Design element, need to be initialized using the [Initialize Toggle Switch in Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/initialize-toggle-switch-in-data-design) block, after they are added to the page or form.
{% endhint %}