# Set Input Feedback

{% 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 Input Feedback`** is a [regular block](https://docs.zingy.ai/app-editor/block-anatomy#regular-block) that allows you to set the feedback for [Input](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input), [Dropdown](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/dropdown), [Multi-line](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/multi-line), [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="warning" %}
NOTE: [Input](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input), [Dropdown](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/dropdown), [Multi-line](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/multi-line) elements must have their [**`Form Control`**](https://docs.zingy.ai/page-editor/built-in-elements/input#form-control) option set to "yes" for feedback control to work.
{% endhint %}

The feedback can be one of:

* Valid: Renders the element with a green border and a green check mark to indicate that the data entered is valid.
* Invalid: Renders the element with a red border and a red exclamation mark to indicate that the data entered is invalid.
* Cleared: Resets the element to it's original pre-validated state.

{% hint style="success" %}
Refer to the [Set Input Feedback in Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/set-input-feedback-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%2FqObPsWQ1uaDrcOeJZIQi%2Fimage.png?alt=media&#x26;token=9fb5821b-3b56-4400-86da-6cb8bbae48e3" alt="" width="415"><figcaption><p>Set Input Feedback (Mode 1)</p></figcaption></figure></div>

The Mode 1 version of the Set Input Feedback 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 feedback of.
* *Data*: [Dropdown](https://docs.zingy.ai/app-editor/block-anatomy#dropdown) that accepts the type of feedback 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%2FZbimV6vm6jUmUWZLBCHw%2Fimage.png?alt=media&#x26;token=10a11a8d-1271-4e06-a49f-d0e1f67f821c" alt="" width="415"><figcaption><p>Set Input Feedback (Mode 2)</p></figcaption></figure></div>

The Mode 2 version of the Set Input Feedback 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*: [Dropdown](https://docs.zingy.ai/app-editor/block-anatomy#dropdown) that accepts the type of feedback to set.

***

## Usage Examples

The image below shows an example of the Mode 1 version where the feedback is set to "Invalid".

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Fgsn1hBBfPuah93QyYw2w%2Fimage.png?alt=media&#x26;token=175dc63e-271a-462c-bcd2-05d6aec6d336" alt="" width="563"><figcaption><p>Example of Set Input Feedback 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 feedback has been set to "Valid".

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FqCNXbvAJQ0X74WvN6CJI%2Fimage.png?alt=media&#x26;token=98d002ce-173a-4a3e-8063-ea826f6958e4" alt="" width="563"><figcaption><p>Example of Set Input Feedback Mode 2</p></figcaption></figure></div>