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

NameDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding valuearray / string / number / boolean / object
multiplewhether multiple-select is activatedbooleantrue / falsefalse
disabledwhether Select is disabledbooleantrue / falsefalse
value-keyunique identity key name for value, required when value is an objectstringvalue
sizesize of Inputstringlarge/default/smalldefault
clearablewhether select can be clearedbooleantrue / falsefalse
collapse-tagswhether to collapse tags to a text when multiple selectingbooleantrue / falsefalse
collapse-tags-tooltipwhether show all selected tags when mouse hover text of collapse-tags. To use this, collapse-tags must be truebooleantrue / falsefalse
multiple-limitmaximum number of options user can select when multiple is true. No limit when set to 0number0
namethe name attribute of select inputstring
effectTooltip theme, built-in theme: dark / lightstringstringlight
autocompletethe autocomplete attribute of select inputstringoff
placeholderplaceholderstringSelect
filterablewhether Select is filterablebooleantrue / falsefalse
allow-createwhether creating new items is allowed. To use this, filterable must be truebooleantrue / falsefalse
filter-methodcustom filter methodfunction
remotewhether options are loaded from serverbooleantrue / falsefalse
remote-methodcustom remote search methodfunction
remote-show-suffixin remote search method show suffix iconbooleantrue / falsefalse
loadingwhether Select is loading data from serverbooleantrue / falsefalse
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 optionbooleantrue / falsetrue
default-first-optionselect first matching option on enter key. Use with filterable or remotebooleantrue / falsefalse
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 falsebooleantrue / falsetrue
teleportedwhether select dropdown is teleported to the bodybooleantrue / falsetrue
persistentwhen select dropdown is inactive and persistent is false, select dropdown will be destroyedbooleantrue / falsetrue
automatic-dropdownfor non-filterable Select, this prop decides if the option menu pops up when the input is focusedbooleantrue / falsefalse
clear-iconCustom clear icon componentstring | ComponentCircleClose
fit-input-widthwhether the width of the dropdown is the same as the inputbooleantrue / falsefalse
suffix-iconCustom suffix icon componentstring | ComponentArrowDown
suffix-transitiondeprecatedanimation when dropdown appears/disappears iconbooleantrue / falsetrue
tag-typetag typestringsuccess/info/warning/dangerinfo
validate-eventwhether to trigger form validationbooleantrue / falsetrue
placementposition of dropdownstringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endbottom-start

WARNING

suffix-transition has been deprecated, and will be removed in2.3.0, please use override style scheme.

Select Events

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: FocusEvent)
focustriggers when Input focuses(event: FocusEvent)

Select Slots

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

Option Group Attributes

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

Option Group Slots

NameDescriptionSubtags
-customize default contentOption

Option Attributes

NameDescriptionTypeAccepted 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-

Source

ComponentDocs

Contributors