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

NameDescriptionTypeDefault
typetype of inputstring native input typestext
model-value / v-modelbinding valuestring / number
maxlengthsame as maxlength in native inputstring / number
minlengthsame as minlength in native inputstring / number
show-word-limitwhether show word count, only works when type is 'text' or 'textarea'booleanfalse
placeholderplaceholder of Inputstring
clearablewhether to show clear button, only works when type is not 'textarea'booleanfalse
formatterspecifies the format of the value presented input.(only works when type is 'text')Function
parserspecifies the value extracted from formatter input.(only works when type is 'text')Function
show-passwordwhether to show toggleable password inputbooleanfalse
disabledwhether Input is disabledbooleanfalse
sizesize of Input, works when type is not 'textarea'enum
prefix-iconprefix icon componentstring / Component
suffix-iconsuffix icon componentstring / Component
rowsnumber of rows of textarea, only works when type is 'textarea'number2
autosizewhether textarea has an adaptive height, only works when type is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }boolean / objectfalse
autocompletesame as autocomplete in native inputstringoff
namesame as name in native inputstring
readonlysame as readonly in native inputbooleanfalse
maxsame as max in native input
minsame as min in native input
stepsame as step in native input
resizecontrol the resizabilityenum
autofocussame as autofocus in native inputbooleanfalse
formsame as form in native inputstring
label a11y deprecatedsame as aria-label in native inputstring
aria-label a11y 2.7.2same as aria-label in native inputstring
tabindexinput tabindexstring / number
validate-eventwhether to trigger form validationbooleantrue
input-stylethe style of the input element or textarea elementstring / object{}

Events

NameDescriptionType
blurtriggers when Input blursFunction
focustriggers when Input focusesFunction
changetriggers when the input box loses focus or the user presses Enter, only if the modelValue has changedFunction
inputtriggers when the Input value changeFunction
cleartriggers when the Input is cleared by clicking the clear buttonFunction

Slots

NameDescription
prefixcontent as Input prefix, only works when type is not 'textarea'
suffixcontent as Input suffix, only works when type is not 'textarea'
prependcontent to prepend before Input, only works when type is not 'textarea'
appendcontent to append after Input, only works when type is not 'textarea'

Exposes

NameDescriptionType
blurblur the input elementFunction
clearclear input valueFunction
focusfocus the input elementFunction
inputHTML input elementobject
refHTML element, input or textareaobject
resizeTextarearesize textareaFunction
selectselect the text in input elementFunction
textareaHTML textarea elementobject
textareaStylestyle of textareaobject

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" />

Source

ComponentDocs

Contributors