# Input

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FToVwjzorXvvyAjmTFu9H%2Fimage.png?alt=media&#x26;token=3db7cb06-6967-49ab-88c4-213525e4a6eb" alt="" width="69"><figcaption><p>Input Element</p></figcaption></figure></div>

Use the **`Input`** element to interact with users and accept data.&#x20;

This element is also part of the [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) composite elements, where the Type is set to *Checkbox* (see below).

{% hint style="success" %}
If you are designing a Form, you can use the automatically created Data Field Input elements to accept data from the user. See [Working with Forms](https://docs.zingy.ai/app-editor/page-editor/working-with-forms) for more information. The **`Input`** element is a part of the Data Field Input composite elements.
{% endhint %}

***

## Options

The [Options tab](https://docs.zingy.ai/app-editor/page-element-settings#options-tab) settings for this element are described below:

### `Type`

Controls the type and design of the element.

The possible values are:

* Text:&#x20;

  Accepts any general input.
* Date

  Accepts a date in the format set in the user's locale. e.g. MM/DD/YYYY/etc.  Most modern browsers will show a date picker to allow the user to conveniently pick a date.
* Date/Time

  Accepts a date and time in the format set in the user's locale e.g. MM/DD/YYYY/etc. Most modern browsers will show a date and time picker.
* Time

  Accepts the time in the format set in the user's locale. Most modern browsers will show a time picker.
* Week

  Allows the user to select a week. For more information see [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week). Safari and Firefox browsers do not support this currently.
* Month

  Allows the user to select a month. For more information see [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month). Safari and Firefox browsers do not support this currently.
* URL

  Accepts a URL.
* Number

  Accepts a numeric value. You can use this in conjunction with *Numeric/Range Min* and *Numeric/Range Max* settings.
* Phone

  Accepts a phone number.
* Email

  Accepts an email address.
* Password

  Accepts a password.
* Color Picker

  Shows a color picker.
* Range

  Use this in conjunction *Numeric/Range Min* and *Numeric/Range Max* settings to show a slider.
* Checkbox

  Shows a checkbox. This is used internally by the [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) composite elements.

### `Title`

Enter the text you want displayed in the tooltip shown by the browser when a user hovers over the element.

### `Place Holder`

Enter the text you want displayed inside the element as a hint to the user. The place holder appears only when the element is empty and automatically disappears when the user types inside the element.

### `Initial Value`

If you want the element to already have an entered value, you set it here.

### `Autocomplete`

Allows you to provide a hint to the browser's autocomplete functionality.

Possible values are:

* Default

  Use the browser's default behavior for the current user.
* off

  Suggest the browser to not use autocomplete for this element.
* on

  Suggest the browser to use autocomplete for this element.

### `Numeric/Range Min`

For elements with the Type setting of Numeric or Range, you can specify the minimum allowed value.

### `Numeric/Range Max`

For elements with the Type setting of Numeric or Range, you can specify the maximum allowed value.

### `Form Field Name`

If you are implementing a completely custom HTML form on your page, use this to set the value of the name attribute for this element.

### `Mandatory`

Set this to *yes* If you want to make sure a valid data is entered for this element. This is used in [forms](https://docs.zingy.ai/app-editor/page-editor/working-with-forms) and can also be used if you are implementing a completely custom HTML form on your page.

### `Form Control`

This is used in [forms](https://docs.zingy.ai/app-editor/page-editor/working-with-forms) and adds a consistent design/style to your input element. Additionally this also enables [feedback control for the element](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/set-input-feedback) so that you can communicate whether the value is valid or invalid. Use this in conjunction with the *Form Control Size* setting.

### `Form Control Size`

Use this in conjunction with the *Form Control* setting. Control the size of the input element.