# input
A single HTML field for all input type.
> **Note**: This field is not recommended for `button`, `file`, `image`, `radio`, `reset`, `search` and `submit` type.
>
> It is best to use other build in fields that provide more control and features.
## Special properties of field
| Property | Default | Accepted values | Description |
| --------------------- | ------- | --------------- | ---------------------------------------------------------------------------------------------------- |
| inputType | *none* | String | Type of input field (ex. `text`, `tel`, `number`, `email`) |
| debounceFormatTimeout | 1000 | Number | Debounce time (ms) for non text input types (`number`, `range`, `date`,`datetime`, `datetime-local`) |
See "attributes compatibility" at the end of this page.
## Usage
### Text field with 50 characters limit :
```javascript
{
type: "input",
inputType: "text",
label: "Name",
model: "name",
maxlength: 50,
required: true,
placeholder: "User's full name",
validator: validators.string
}
```
## Attributes compatibility
Since attributes depend on the `type` of `input`, here is a table showing the compatible attributes for each field type.\
[Source](https://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html)
| | Hidden | Text, Search | URL, Telephone | E-mail | Password | Date and Time, Date, Month, Week, Time | Local Date and Time | Number | Range | Color | Checkbox, Radio Button | File Upload | Submit Button | Image Button | Reset Button, Button |
| -------------- | ------ | ------------ | -------------- | ------ | -------- | -------------------------------------- | ------------------- | ------ | ----- | ----- | ---------------------- | ----------- | ------------- | ------------ | -------------------- |
| id | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| value | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| accept | · | · | · | · | · | · | · | · | · | · | · | Yes | · | · | · |
| alt | · | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
| autocomplete | · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · |
| checked | · | · | · | · | · | · | · | · | · | · | Yes | · | · | · | · |
| dirname | · | Yes | · | · | · | · | · | · | · | · | · | · | · | · | · |
| formaction | · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
| formenctype | · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
| formmethod | · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
| formnovalidate | · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
| formtarget | · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
| height | · | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
| list | · | Yes | Yes | Yes | · | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · |
| max | · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
| maxlength | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · | · |
| min | · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
| multiple | · | · | · | Yes | · | · | · | · | · | · | · | Yes | · | · | · |
| pattern | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · | · |
| placeholder | · | Yes | Yes | Yes | Yes | · | · | Yes | · | · | · | · | · | · | · |
| readonly | · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · |
| required | · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | Yes | Yes | · | · | · |
| size | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · | · |
| src | · | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
| step | · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
| width | · | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
---
# 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://vue-generators.gitbook.io/vue-generators/develop/fields/core-fields/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.