## 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 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.
```html
Using attributes
Using slots
```
:::
### Textarea
Resizable for entering multiple lines of text information. Add attribute `type="textarea"` to change `input` into native `textarea`.
::: demo Control the height by setting the `rows` prop.
```html
```
:::
### Autosize Textarea
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.
::: demo
```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
Http://
.com
```
:::
### 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
```
:::
### Autocomplete
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 Use `scoped slot` to customize suggestion items. In the scope, you can access the suggestion object via the `item` key.
```html
{{ props.item.value }}
{{ props.item.link }}
```
:::
### Remote search
Search data from server-side.
::: demo
```html
```
:::
### Input Attributes
| Attribute | Description | Type | Accepted Values | Default |
| ----| ----| ----| ---- | ----- |
|type| type of input | string | text / textarea | 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 | medium / small / mini | — |
| prefix-icon | prefix icon class | string | — | — |
| suffix-icon | suffix icon class | 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 | — | — |
| 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 | — | — |
| label | label text | string | — | — |
### Input slots
| Name | Description |
|------|--------|
| prefix | content as Input prefix |
| suffix | content as Input suffix |
| prepend | content to prepend before Input |
| append | content to append after Input |
### Input Events
| Event Name | Description | Parameters |
|----| ----| ----|
| blur | triggers when Input blurs | (event: Event) |
| focus | triggers when Input focuses | (event: Event) |
| change | triggers when the icon inside Input value change | (value: string \| number) |
### Autocomplete Attributes
Attribute | Description | Type | Options | Default
|----| ----| ----| ---- | -----|
|placeholder| the placeholder of Autocomplete| string | — | — |
|disabled | whether Autocomplete is disabled | boolean | — | false|
| props | configuration options, see the following table | object | — | — |
|icon | icon name | string | — | — |
|value | binding value | string | — | — |
| debounce | debounce delay when typing, in milliseconds | number | — | 300 |
|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 |
| on-icon-click | hook function when clicking on the input icon | function | — | — |
| 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 |
| label | label text | string | — | — |
### props
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------------- | ------ | ------ | ------ |
| label | specify which key of option object is used as the option's label | string | — | value |
| value | specify which key of option object is used as the option's value | string | — | value |
### Autocomplete slots
| Name | Description |
|------|--------|
| prefix | content as Input prefix |
| suffix | content as Input suffix |
| prepend | content to prepend before Input |
| append | content to append after Input |
### Autocomplete Events
| Event Name | Description | Parameters |
|----| ----| ----|
|select | triggers when a suggestion is clicked | suggestion being clicked |
### Methods
| Method | Description | Parameters |
|------|--------|-------|
| focus | focus the Input component | — |