Input
Input data using mouse or keyboard.
WARNING
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.
Do not support v-model modifiers.
Basic usage
Disabled
Clearable
Formatter
Display value within it's situation with formatter, and we usually use parser at the same time.
Password box
Input with icon
Add an icon to indicate input type.
Textarea
Resizable for entering multiple lines of text information. Add attribute type="textarea" to change input into native textarea.
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.
Mixed input
Prepend or append an element, generally a label or a button.
Sizes
Limit length
API
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| type | type of input | string native input types | text |
| model-value / 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 |
| placeholder | placeholder of Input | string | — |
| clearable | whether to show clear button, only works when type is not 'textarea' | boolean | false |
| formatter | specifies the format of the value presented input.(only works when type is 'text') | Function | — |
| parser | specifies the value extracted from formatter input.(only works when type is 'text') | Function | — |
| show-password | whether to show toggleable password input | boolean | false |
| disabled | whether Input is disabled | boolean | false |
| size | size of Input, works when type is not 'textarea' | enum | — |
| prefix-icon | prefix icon component | string / Component | — |
| suffix-icon | suffix icon component | string / Component | — |
| 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 | enum | — |
| autofocus | same as autofocus in native input | boolean | false |
| form | same as form in native input | string | — |
| label a11y | same as aria-label in native input | string | — |
| tabindex | input tabindex | string / number | — |
| validate-event | whether to trigger form validation | boolean | true |
| input-style | the style of the input element or textarea element | string / object | {} |
Events
| Name | Description | Type |
|---|---|---|
| blur | triggers when Input blurs | Function |
| focus | triggers when Input focuses | Function |
| change | triggers when the input box loses focus or the user presses Enter, only if the modelValue has changed | Function |
| input | triggers when the Input value change | Function |
| clear | triggers when the Input is cleared by clicking the clear button | Function |
Slots
| Name | Description |
|---|---|
| prefix | content as Input prefix, only works when type is not 'textarea' |
| suffix | content as Input suffix, only works when type is not 'textarea' |
| prepend | content to prepend before Input, only works when type is not 'textarea' |
| append | content to append after Input, only works when type is not 'textarea' |
Exposes
| Name | Description | Type |
|---|---|---|
| blur | blur the input element | Function |
| clear | clear input value | Function |
| focus | focus the input element | Function |
| input | HTML input element | object |
| ref | HTML element, input or textarea | object |
| resizeTextarea | resize textarea | Function |
| select | select the text in input element | Function |
| textarea | HTML textarea element | object |
| textareaStyle | style of textarea | object |
FAQ
Why is the width of the ElInput component expanded by clearable?
Typical issue: #7287
PS: Since the ElInput component does not have a default width, when the clearable icon is displayed, the width of the component will be expanded, which can be solved by setting width.
<el-input v-model="input" clearable style="width: 200px" />