# Enable/Disable Element in Data Design

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

Available in: Page Flow

Toolbox Category: Dynamic Input

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

**`Enable/Disable Element in Data Design`** is a [regular block](https://docs.zingy.ai/app-editor/block-anatomy#regular-block) that allows you to enable or disable elements that were generated using the [Content from Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/content-from-data-design) block and dynamically added to the page or form.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FdzRRPnQFnwgHtscGqh7c%2Fimage.png?alt=media&#x26;token=cac38647-8868-4158-b925-e285ae982443" alt="" width="262"><figcaption><p>Enable/Disable Element in Data Design block</p></figcaption></figure></div>

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.

The behavior of the block is similar to the [Enable/Disable Element](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/enable-disable-element) block, with some important differences:

* Works only with elements generated using [Content from Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/content-from-data-design) block that are dynamically added.
* Element Selection: You can only choose an element placed inside the selected [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element.

The block consists of the following (from top to bottom):

* *Data Design*: [Selectable Input](https://docs.zingy.ai/app-editor/block-anatomy#selectable-input) to choose the [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element whose element you want to target.
* *Element*: [Selectable Input](https://docs.zingy.ai/app-editor/block-anatomy#selectable-input) to choose the element, within the selected [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design), you want to enable/disable.
* *ID*: Optional [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value representing the unique value that was provided to the [Content from Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/content-from-data-design) block. See below for more details.
* *ID2*: Optional [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value representing the secondary identifier that can be used to identify the desired element. See below for more details.
* *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.

***

## ID and ID2 usage

The behavior of this block depends on the ID and ID2 [value parameters](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) and is detailed below:

* ID and ID2 not provided: Operate on the selected element for all generated instances of the same [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element.
* ID2 provided and ID not provided: Operate on the selected element for all generated instances of the same [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element with the same ID2 value.
* ID provided and ID2 not provided: Operate on the selected element for all generated instances of the same [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element with the same ID value. Since we recommend the ID value to be unique, this would choose one from all the generated instances of the associated [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element.
* ID and ID2 provided: Operate on the selected element for all generated instances of the same [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element with the same ID  and ID2 value.&#x20;

***

## Usage Examples

{% hint style="info" %}
**NOTE: Please refer to the prerequisite information shown** [**here**](https://docs.zingy.ai/app-editor/page-flow/references/prerequisite-for-dynamic-content-block-examples) **before seeing the example.**&#x20;
{% endhint %}

The image below shows an example in which the state of the [Input](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input) element (*Input43*) is set to *disabled* for Company 2, which is rendered with the ID *ST101*.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FA9RQj3UAyKQOPqUncAYD%2Fimage.png?alt=media&#x26;token=4ad54759-de82-4693-a364-a1226bfd44e7" alt="" width="529"><figcaption><p>Enable/Disable Element in Data Design example 1</p></figcaption></figure></div>

The result of the above example is highlighted below, where the [Input](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input) element (*Input43*) is disabled for Company 2.

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FIL3JTuC6nUhQYPiXSuVr%2Fimage.png?alt=media&#x26;token=d6aa55d2-2390-4d13-9b6f-78804b85dbf4" alt=""><figcaption><p>Result of example 1</p></figcaption></figure>

In the second example, we will illustrate the scenario where neither ID nor ID2 are provided. In this case, the system will disable the [Input](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input) element (*Input43*) for all generated instances.&#x20;

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F2JSSAJlsy6TaPcV7GZLs%2Fimage.png?alt=media&#x26;token=91cbc738-c302-47d9-9d92-79c0ad4ece51" alt="" width="473"><figcaption><p>Enable/Disable Element in Data Design example 2</p></figcaption></figure></div>

The result of the above example is highlighted below, where the [Input](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input) element (*Input43*) is disabled for both the companies.

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FCEpmn1vuKBLthfW38zMh%2Fimage.png?alt=media&#x26;token=275e53ce-cb56-4f09-b1f9-79d70e6191c9" alt=""><figcaption><p>Result of example 2</p></figcaption></figure>