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.

Remote search

Search data from server-side.

Limit length

Input Attributes

Attribute	Description	Type	Accepted Values	Default
type	type of input	string	text, textarea and other native input types	text
modelValue / 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	boolean	—	false
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'	string	large / default / small	—
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	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	—	—
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	object	-	{}

Input slots

Name	Description
prefix	content as Input prefix, only works when `type` is 'text'
suffix	content as Input suffix, only works when `type` is 'text'
prepend	content to prepend before Input, only works when `type` is 'text'
append	content to append after Input, only works when `type` is 'text'

Input Events

Event Name	Description	Parameters
blur	triggers when Input blurs	(event: Event)
focus	triggers when Input focuses	(event: Event)
change	triggers only when the input box loses focus or the user presses Enter	(value: string \| number)
input	triggers when the Input value change	(value: string \| number)
clear	triggers when the Input is cleared by clicking the clear button	—

Input Methods

Method	Description	Parameters
focus	focus the input element	—
blur	blur the input element	—
select	select the text in input element	—

Autocomplete Attributes

Attribute	Description	Type	Accepted Values	Default
placeholder	the placeholder of Autocomplete	string	—	—
clearable	whether to show clear button	boolean	—	false
disabled	whether Autocomplete is disabled	boolean	—	false
value-key	key name of the input suggestion object for display	string	—	value
icon	icon component	string / Component	—	—
model-value / v-model	binding value	string	—	—
debounce	debounce delay when typing, in milliseconds	number	—	300
placement	placement of the popup menu	string	top / top-start / top-end / bottom / bottom-start / bottom-end	bottom-start
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
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	—	—
prefix-icon	prefix icon class	string / Component	—	—
suffix-icon	suffix icon class	string / Component	—	—
hide-loading	whether to hide the loading icon in remote search	boolean	—	false
popper-append-to-body(deprecated)	whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false	boolean	-	false
teleported	whether select dropdown is teleported to the body	boolean	true / false	true
highlight-first-item	whether to highlight first item in remote search suggestions by default	boolean	—	false

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 Scoped Slot

Name	Description
—	Custom content for input suggestions. The scope parameter is

Autocomplete Events

Event Name	Description	Parameters
select	triggers when a suggestion is clicked	suggestion being clicked
change	triggers when the icon inside Input value change	(value: string \| number)

Autocomplete Methods

Method	Description	Parameters
focus	focus the input element	—

Form

Input Number

Input #

Basic usage #

Disabled #

Clearable #

Password box #

Input with icon #

Textarea #

Autosize Textarea #

Mixed input #

Sizes #

Autocomplete #

Custom template #

Remote search #

Limit length #

Input Attributes #

Input slots #

Input Events #

Input Methods #

Autocomplete Attributes #

Autocomplete Slots #

Autocomplete Scoped Slot #

Autocomplete Events #

Autocomplete Methods #