Select

When there are plenty of options, use a drop-down menu to display and select desired ones.

Basic usage

Disabled option

Disabled select

Disable the whole component.

Clearable single select

You can clear Select using a clear icon.

Basic multiple select

Multiple select uses tags to display selected options.

Custom template

You can customize HTML templates for options.

Grouping

Display options in groups.

Option filtering

You can filter options for your desired ones.

Remote Search

Enter keywords and search data from server.

Create new items

Create and select new items that are not included in select options

TIP

If the binding value of Select is an object, make sure to assign value-key as its unique identity key name.

Select Attributes

Attribute	Description	Type	Accepted Values	Default
model-value / v-model	binding value	string / number / boolean / object	—	—
multiple	whether multiple-select is activated	boolean	—	false
disabled	whether Select is disabled	boolean	—	false
value-key	unique identity key name for value, required when value is an object	string	—	value
size	size of Input	string	large/default/small	default
clearable	whether select can be cleared	boolean	—	false
collapse-tags	whether to collapse tags to a text when multiple selecting	boolean	—	false
multiple-limit	maximum number of options user can select when `multiple` is `true`. No limit when set to 0	number	—	0
name	the name attribute of select input	string	—	—
effect	Tooltip theme, built-in theme: `dark` / `light`	string	string	light
autocomplete	the autocomplete attribute of select input	string	—	off
placeholder	placeholder	string	—	Select
filterable	whether Select is filterable	boolean	—	false
allow-create	whether creating new items is allowed. To use this, `filterable` must be true	boolean	—	false
filter-method	custom filter method	function	—	—
remote	whether options are loaded from server	boolean	—	false
remote-method	custom remote search method	function	—	—
loading	whether Select is loading data from server	boolean	—	false
loading-text	displayed text while loading data from server	string	—	Loading
no-match-text	displayed text when no data matches the filtering query, you can also use slot `empty`	string	—	No matching data
no-data-text	displayed text when there is no options, you can also use slot `empty`	string	—	No data
popper-class	custom class name for Select's dropdown	string	—	—
reserve-keyword	when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option	boolean	—	true
default-first-option	select first matching option on enter key. Use with `filterable` or `remote`	boolean	-	false
popper-append-to-body(deprecated)	whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false	boolean	-	true
teleported	whether select dropdown is teleported to the body	boolean	true / false	true
automatic-dropdown	for non-filterable Select, this prop decides if the option menu pops up when the input is focused	boolean	-	false
clear-icon	Custom clear icon component	string / Component	—	CircleClose
fit-input-width	whether the width of the dropdown is the same as the input	boolean	—	false
suffix-icon	Custom suffix icon component	string / Component	—	ArrowUp
tag-type	tag type	string	success/info/warning/danger	info

Select Events

Event Name	Description	Parameters
change	triggers when the selected value changes	current selected value
visible-change	triggers when the dropdown appears/disappears	true when it appears, and false otherwise
remove-tag	triggers when a tag is removed in multiple mode	removed tag value
clear	triggers when the clear icon is clicked in a clearable Select	—
blur	triggers when Input blurs	(event: Event)
focus	triggers when Input focuses	(event: Event)

Select Slots

Name	Description	Subtags
—	Option component list	Option Group / Option
prefix	content as Select prefix	—
empty	content when there is no options	—

Option Group Attributes

Attribute	Description	Type	Accepted Values	Default
label	name of the group	string	—	—
disabled	whether to disable all options in this group	boolean	—	false

Option Group Slots

Name	Description	Subtags
-	customize default content	Option

Option Attributes

Attribute	Description	Type	Accepted Values	Default
value	value of option	string / number / boolean / object	—	—
label	label of option, same as `value` if omitted	string/number	—	—
disabled	whether option is disabled	boolean	—	false

Option Slots

Name	Description
—	customize default content

Methods

Method	Description	Parameters
focus	focus the Input component	-
blur	blur the Input component, and hide the dropdown	-

Rate

Virtualized Select

Select #

Basic usage #

Disabled option #

Disabled select #

Clearable single select #

Basic multiple select #

Custom template #

Grouping #

Option filtering #

Remote Search #

Create new items #

Select Attributes #

Select Events #

Select Slots #

Option Group Attributes #

Option Group Slots #

Option Attributes #

Option Slots #

Methods #