# Enable/Disable Element

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

**`Enable/Disable Element`** is a [regular block](https://docs.zingy.ai/app-editor/block-anatomy#regular-block) that allows you to enable or disable elements on a page or form. When an element is disabled, it typically appears grayed out and the user cannot click on it or interact with it in any way. 

The specific behavior depends on the type of element it is applied to. Here are some common use cases:

* [Input](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input) and [Multi-line](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/multi-line) elements: The user cannot enter or modify any value.
* [Dropdown](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/dropdown) element: The dropdown menu becomes non-selectable, and the user cannot change the selected option.
* [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 : The user cannot toggle the state.
* [Button](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button) and [Link](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/link) elements:  The user cannot trigger clicks/right-clicks, double-clicks, etc.

{% hint style="success" %}
Refer to the [Enable/Disable Element in Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/enable-disable-element-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%2FmUCMU9VKcfuzRJfDbz8d%2Fimage.png?alt=media&#x26;token=c0d6c525-7f59-4b03-92c4-352ca6e443e1" alt="" width="379"><figcaption><p>Enable/Disable Element (Mode 1)</p></figcaption></figure></div>

The Mode 1 version of the Enable/Disable Element 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 enable/disable.
* *Data*: [Dropdown](https://docs.zingy.ai/app-editor/block-anatomy#dropdown) to select the option to enable or disable the element.

## 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%2FkNQElIiZISMBYeVvkKnV%2Fimage.png?alt=media&#x26;token=77accc5d-a841-4c59-9650-40664117fc45" alt="" width="299"><figcaption><p>Enable/Disable Element (Mode 2)</p></figcaption></figure></div>

The Mode 2 version of the Enable/Disable Element 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)* value where *true* represents the enabled state and *false* represents the disabled state.

***

## Usage Examples

The image below shows an example of the Mode 1 version where the selected element is disabled.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Fb2pj01nJR4aWQJntQZJt%2Fimage.png?alt=media&#x26;token=1b6d4724-de79-4025-871b-6b1712e75a8c" alt="" width="563"><figcaption><p>Example of Enable/Disable Element 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 element is enabled.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F3gXYDhozAIXc60E3hYgg%2Fimage.png?alt=media&#x26;token=166a1dcf-7615-4535-9c3e-c827da923673" alt="" width="563"><figcaption><p>Example of Enable/Disable Element 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 %}