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.


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


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/default/smalldefault
clearablewhether select can be clearedbooleanfalse
collapse-tagswhether to collapse tags to a text when multiple selectingbooleanfalse
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
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 optionbooleantrue
default-first-optionselect first matching option on enter key. Use with filterable or remoteboolean-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 falseboolean-true
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 focusedboolean-false
clear-iconCustom clear icon componentstring / ComponentCircleClose
fit-input-widthwhether the width of the dropdown is the same as the inputbooleanfalse
suffix-iconCustom suffix icon componentstring / ComponentArrowUp
tag-typetag typestringsuccess/info/warning/dangerinfo
validate-eventwhether to trigger form validationboolean-true

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

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

-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

customize default content


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