Use the **`Input`** element to interact with users and accept data.
This element is also part of the [Checkbox](/app-editor/page-editor/built-in-elements/checkbox.md) and [Toggle Switch](/app-editor/page-editor/built-in-elements/toggle-switch.md) 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](/app-editor/page-editor/working-with-forms.md) for more information. The **`Input`** element is a part of the Data Field Input composite elements.
{% endhint %}
***
## Options
The [Options tab](/app-editor/page-editor/page-element-settings.md#options-tab) settings for this element are described below:
### `Type`
Controls the type and design of the element.
The possible values are:
* Text:
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](/app-editor/page-editor/built-in-elements/checkbox.md) and [Toggle Switch](/app-editor/page-editor/built-in-elements/toggle-switch.md) 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](/app-editor/page-editor/working-with-forms.md) and can also be used if you are implementing a completely custom HTML form on your page.
### `Form Control`
This is used in [forms](/app-editor/page-editor/working-with-forms.md) and adds a consistent design/style to your input element. Additionally this also enables [feedback control for the element](/app-editor/page-flow/toolbox-blocks/set-input-feedback.md) 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.