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.

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

AttributeDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding valuestring / number / boolean / object
multiplewhether multiple-select is activatedbooleanfalse
disabledwhether Select is disabledbooleanfalse
value-keyunique identity key name for value, required when value is an objectstringvalue
sizesize of Inputstringlarge/medium/small/minilarge
clearablewhether select can be clearedbooleanfalse
collapse-tagswhether to collapse tags to a text when multiple selectingbooleanfalse
multiple-limitmaximum number of options user can select when multiple is true. No limit when set to 0number0
namethe name attribute of select inputstring
autocompletethe autocomplete attribute of select inputstringoff
placeholderplaceholderstringSelect
filterablewhether Select is filterablebooleanfalse
allow-createwhether creating new items is allowed. To use this, filterable must be truebooleanfalse
filter-methodcustom filter methodfunction
remotewhether options are loaded from serverbooleanfalse
remote-methodcustom remote search methodfunction
loadingwhether Select is loading data from serverbooleanfalse
loading-textdisplayed text while loading data from serverstringLoading
no-match-textdisplayed text when no data matches the filtering query, you can also use slot emptystringNo matching data
no-data-textdisplayed text when there is no options, you can also use slot emptystringNo data
popper-classcustom class name for Select's dropdownstring
reserve-keywordwhen multiple and filter is true, whether to reserve current keyword after selecting an optionbooleanfalse
default-first-optionselect first matching option on enter key. Use with filterable or remoteboolean-false
popper-append-to-bodywhether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to falseboolean-true
automatic-dropdownfor non-filterable Select, this prop decides if the option menu pops up when the input is focusedboolean-false
clear-iconCustom clear icon classstringel-icon-circle-close

Select Events

Event NameDescriptionParameters
changetriggers when the selected value changescurrent selected value
visible-changetriggers when the dropdown appears/disappearstrue when it appears, and false otherwise
remove-tagtriggers when a tag is removed in multiple moderemoved tag value
cleartriggers when the clear icon is clicked in a clearable Select
blurtriggers when Input blurs(event: Event)
focustriggers when Input focuses(event: Event)

Select Slots

NameDescriptionSubtags
Option component listOption Group / Option
prefixcontent as Select prefix
emptycontent when there is no options

Option Group Attributes

AttributeDescriptionTypeAccepted ValuesDefault
labelname of the groupstring
disabledwhether to disable all options in this groupbooleanfalse

Option Group Slots

NameDescriptionSubtags
-customize default contentOption

Option Attributes

AttributeDescriptionTypeAccepted ValuesDefault
valuevalue of optionstring / number / boolean / object
labellabel of option, same as value if omittedstring/number
disabledwhether option is disabledbooleanfalse

Option Slots

NameDescription
customize default content

Methods

MethodDescriptionParameters
focusfocus the Input component-
blurblur the Input component, and hide the dropdown-