Input is a controlled component, it **always shows Vue binding value**.
Under normal circumstances, `input` event should be handled. Its handler should update component's binding value (or use `v-model`). Otherwise, input box's value will not change.
:::demo To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well.
Setting the `autosize` prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea can automatically adjust.
You can get some recommended tips based on the current input.
:::demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
:::demo `maxlength` and `minlength` attributes of input, they declare a limit on the number of characters a user can input. The "number of characters" is measured using JavaScript string length.Setting the `maxlength` prop for a text or textarea type of Input can limit the length of input value, allows you to show word count by setting `show-word-limit` to `true` at the same time.
| type | type of input | string | text, textarea and other [native input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
| modelValue / v-model | binding value | string / number | — | — |
| maxlength | the max length | string / number | — | — |
| minlength | same as `minlength` in native input | number | — | — |
| show-word-limit | whether show word count，only works when `type` is 'text' or 'textarea' | boolean | — | false |
| rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 |
| autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 } | boolean / object | — | false |
| autocomplete | same as `autocomplete` in native input | string | — | off |
| name | same as `name` in native input | string | — | — |
| readonly | same as `readonly` in native input | boolean | — | false |
| max | same as `max` in native input | — | — | — |
| min | same as `min` in native input | — | — | — |
| step | same as `step` in native input | — | — | — |
| resize | control the resizability | string | none / both / horizontal / vertical | — |
| autofocus | same as `autofocus` in native input | boolean | — | false |
| form | same as `form` in native input | string | — | — |
| debounce | debounce delay when typing, in milliseconds | number | — | 300 |
| placement | placement of the popup menu | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
| fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — |
| popper-class | custom class name for autocomplete's dropdown | string | — | — |
| trigger-on-focus | whether show suggestions when input focus | boolean | — | true |
| name | same as `name` in native input | string | — | — |
| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | boolean | — | false |
| hide-loading | whether to hide the loading icon in remote search | boolean | — | false |
| popper-append-to-body | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | boolean | - | false |
| highlight-first-item | whether to highlight first item in remote search suggestions by default | boolean | — | false |
