# Set Input Value

{% 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 Value`** is a [regular block](https://docs.zingy.ai/app-editor/block-anatomy#regular-block) that allows you to set the value of [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) and [Multi-line](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/multi-line) elements on a page or form.

{% hint style="success" %}
Refer to the [Set Input Value in Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/set-input-value-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%2FWONxW3aQ0k9lw2PtyYM8%2Fimage.png?alt=media&#x26;token=964958ee-6131-445e-be16-1573d5c3df64" alt="" width="353"><figcaption><p>Set Input Value (Mode 1)</p></figcaption></figure></div>

The Mode 1 version of the Set Input Value 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 value of.
* *Data*: [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts the value to set (of type [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types)*)*

## 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%2FfZXb5KjRTNnGxlV4wVsI%2Fimage.png?alt=media&#x26;token=8b2f765c-79eb-4550-ba90-1cfbab377249" alt="" width="353"><figcaption><p>Set Input Value (Mode 2)</p></figcaption></figure></div>

The Mode 2 version of the Set Input Value 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 the value to set (of type [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types)*)*

***

## Usage Examples

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 "John".

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FrnjhCgHPclPQf3MfGAKq%2Fimage.png?alt=media&#x26;token=90fee74e-878e-4456-acde-bd59235b7cce" alt="" width="563"><figcaption><p>Example of Set Input Value 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 Text block containing the text "Jane".

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FSxa4RD1VxFPDik2SFmDz%2Fimage.png?alt=media&#x26;token=9655c6db-2aaf-4a1d-845c-eceb4302a70f" alt="" width="563"><figcaption><p>Example of Set Input Value 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 %}