# Input

The live `input` field is the standard single-line field for text, numbers, dates, email, passwords, and similar browser input types.

## Common Configuration Properties

| Property       | Type               | Description                                                                  |
| -------------- | ------------------ | ---------------------------------------------------------------------------- |
| `type`         | `String`           | Must be `"input"`                                                            |
| `label`        | `String`           | Field label                                                                  |
| `model`        | `String`           | Model key that stores the value                                              |
| `placeholder`  | `String`           | Placeholder text                                                             |
| `disabled`     | `Boolean`          | Disables the field                                                           |
| `readonly`     | `Boolean`          | Makes the field read-only                                                    |
| `required`     | `Boolean`          | Marks the field as required                                                  |
| `styleClasses` | `String` / `Array` | CSS classes for the field wrapper                                            |
| `fieldOptions` | `Object`           | V3+ input configuration, including `inputType` and standard input attributes |

## `fieldOptions`

The live V3+ field reads its HTML input configuration from `fieldOptions`.

Common keys include:

| Key            | Type                | Description                                                                                                                   |
| -------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `inputType`    | `String`            | Browser input type such as `text`, `password`, `email`, `number`, `url`, `tel`, `date`, `datetime-local`, `color`, or `range` |
| `autocomplete` | `String`            | Browser autocomplete mode                                                                                                     |
| `min`          | `Number` / `String` | Minimum value for numeric/date-like inputs                                                                                    |
| `max`          | `Number` / `String` | Maximum value for numeric/date-like inputs                                                                                    |
| `step`         | `Number` / `String` | Step increment for numeric/range inputs                                                                                       |
| `maxlength`    | `Number`            | Maximum length for text-like inputs                                                                                           |
| `minlength`    | `Number`            | Minimum length for text-like inputs                                                                                           |
| `pattern`      | `String`            | HTML input pattern                                                                                                            |
| `accept`       | `String`            | Accepted file types when using file-style inputs                                                                              |

## Example Schema Snippet

```json
{
  "type": "input",
  "label": "Full Name",
  "model": "fullName",
  "placeholder": "Enter your full name",
  "required": true,
  "hint": "Please provide your first and last name.",
  "fieldOptions": {
    "inputType": "text",
    "maxlength": 100
  }
}
```

## Number Input Example

```json
{
  "type": "input",
  "label": "Quantity",
  "model": "itemQuantity",
  "default": 1,
  "hint": "Enter a number between 1 and 100.",
  "fieldOptions": {
    "inputType": "number",
    "min": 1,
    "max": 100,
    "step": 1
  }
}
```

## Runtime Notes

* `fieldOptions.inputType` is the canonical V3+ shape. BetterForms can migrate legacy top-level `inputType`, but docs should prefer `fieldOptions`.
* For `number` and `range`, the field parses user input into numeric values.
* For `date`, `datetime`, and `datetime-local`, the field applies date parsing and formatting logic before writing back to the model.
* If `schema.format` is supplied for date-like input types, it is used when formatting the stored value.

## Full Property Reference

This element is implemented in the sibling `vue-form-generator` source as `fieldInput.vue`.


---

# 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.klai.studio/reference/components-overview/betterforms-elements/input.md?ask=<question>
```

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.