## Input Input data using mouse or keyboard. ### Basic usage ::: demo ```html ``` ::: ### Disabled ::: demo Disable the Input with the `disabled` attribute. ```html ``` ::: ### Input with icon Add an icon to indicate input type. ::: demo You can add an icon at the end of Input by setting the `icon` attribute. ```html ``` ::: ### Textarea Resizable for entering multiple lines of text information. ::: demo Add attribute `type="textarea"` to change `input` into native `textarea`. ```html ``` ### Mixed input Prepend or append an element, generally a label or a button. ::: demo Use `slot` to distribute elements that prepend or append to Input. ```html

``` ::: ### Sizes ::: demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`. ```html

``` ::: ### Auto complete 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. ```html

list suggestions when activated

list suggestions on input

``` ::: ### Custom template Customize how suggestions are displayed. :::demo ```html ``` ::: ### Remote search Search data from server-side. ::: demo ```html ``` ::: ### Input API | Attribute | Description | Type | Accepted Values | Default | | ----| ----| ----| ---- | ----- | |type| Same as the `type` attribute of native input, except that it can be `textarea` | string | — | text | |value| binding value | string/number| — | — | |maxlength| maximum Input text length| number| — | — | |minlength| minimum Input text length| number | — | — | |placeholder| placeholder of Input| string | — | — | |disabled | whether Input is disabled | boolean | — | false | |size | size of Input, works when `type` is not 'textarea' | string | large/small/mini | — | |icon | icon name | string | — | — | |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 | |auto-complete | same as `auto-complete` in native input | string | on/off | off | |name | same as `name` in native input | string | — | — | |max | same as `max` in native input | * | — | — | |min | same as `min` in native input | * | — | — | |autofocus | same as `autofocus` in native input | boolean | — | false | |form | same as `form` in native input | string | — | — | ### Input Events | Event Name | Description | Parameters | |----| ----| ----| |click | triggers when the icon inside Input is clicked | event object | ### Autocomplete API Attribute | Description | Type | Options | Default |----| ----| ----| ---- | -----| |placeholder| the placeholder of Autocomplete| string | — | — | |disabled | whether Autocomplete is disabled | boolean | — | false| |value | binding value | string | — | — | |custom-item | component name of your customized suggestion list item | string | — | — | |fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — | ### Autocomplete Events | Event Name | Description | Parameters | |----| ----| ----| |select | triggers when a suggestion is clicked | suggestion being clicked |