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

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

Autocomplete

You can get some recommended tips based on the current input.

Custom template

Customize how suggestions are displayed.

Search data from server-side.

Limit length

Input Attributes

AttributeDescriptionTypeAccepted ValuesDefault
typetype of inputstringtext, textarea and other native input typestext
modelValue / v-modelbinding valuestring / number
maxlengththe max lengthstring / number
minlengthsame as minlength in native inputnumber
show-word-limitwhether show word count,only works when type is 'text' or 'textarea'booleanfalse
placeholderplaceholder of Inputstring
clearablewhether to show clear buttonbooleanfalse
show-passwordwhether to show toggleable password inputbooleanfalse
disabledwhether Input is disabledbooleanfalse
sizesize of Input, works when type is not 'textarea'stringmedium / small / mini
prefix-iconprefix icon classstring
suffix-iconsuffix icon classstring
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 resizabilitystringnone / both / horizontal / vertical
autofocussame as autofocus in native inputbooleanfalse
formsame as form in native inputstring
labellabel textstring
tabindexinput tabindexstring / number--
validate-eventwhether to trigger form validationboolean-true
input-stylethe style of the input element or textarea elementobject-{}

Input slots

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

Input Events

Event NameDescriptionParameters
blurtriggers when Input blurs(event: Event)
focustriggers when Input focuses(event: Event)
changetriggers only when the input box loses focus or the user presses Enter(value: string | number)
inputtriggers when the Input value change(value: string | number)
cleartriggers when the Input is cleared by clicking the clear button

Input Methods

MethodDescriptionParameters
focusfocus the input element
blurblur the input element
selectselect the text in input element

Autocomplete Attributes

AttributeDescriptionTypeAccepted ValuesDefault
placeholderthe placeholder of Autocompletestring
clearablewhether to show clear buttonbooleanfalse
disabledwhether Autocomplete is disabledbooleanfalse
value-keykey name of the input suggestion object for displaystringvalue
iconicon namestring
model-value / v-modelbinding valuestring
debouncedebounce delay when typing, in millisecondsnumber300
placementplacement of the popup menustringtop / top-start / top-end / bottom / bottom-start / bottom-endbottom-start
fetch-suggestionsa method to fetch input suggestions. When suggestions are ready, invoke callback(data:[]) to return them to AutocompleteFunction(queryString, callback)
popper-classcustom class name for autocomplete's dropdownstring
trigger-on-focuswhether show suggestions when input focusbooleantrue
namesame as name in native inputstring
select-when-unmatchedwhether to emit a select event on enter when there is no autocomplete matchbooleanfalse
labellabel textstring
prefix-iconprefix icon classstring
suffix-iconsuffix icon classstring
hide-loadingwhether to hide the loading icon in remote searchbooleanfalse
popper-append-to-bodywhether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to falseboolean-false
highlight-first-itemwhether to highlight first item in remote search suggestions by defaultbooleanfalse

Autocomplete Slots

NameDescription
prefixcontent as Input prefix
suffixcontent as Input suffix
prependcontent to prepend before Input
appendcontent to append after Input

Autocomplete Scoped Slot

NameDescription
Custom content for input suggestions. The scope parameter is { item }

Autocomplete Events

Event NameDescriptionParameters
selecttriggers when a suggestion is clickedsuggestion being clicked
changetriggers when the icon inside Input value change(value: string | number)

Autocomplete Methods

MethodDescriptionParameters
focusfocus the input element