Select

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

TIP

After version 2.5.0, the default width of el-select changed to 100%. When used in a inline form, the width will collapse. In order to display the width properly, you need to give el-select a specific width (eg: Example) .

Basic usage

v-model is the value of el-option that is currently selected.

Select
Select
Select

Disabled option

Set the value of disabled in el-option to true to disable this option.

Select

Disabled select

Disable the whole component.

Set disabled of el-select to make it disabled.

Select

Clearable single select

You can clear Select using a clear icon.

Set clearable attribute for el-select and a clear icon will appear. Note that clearable is only for single select.

Select

Basic multiple select

Multiple select uses tags to display selected options.

Set multiple attribute for el-select to enable multiple mode. In this case, the value of v-model will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using collapse-tags attribute. You can check them when mouse hover collapse text by using collapse-tags-tooltip attribute.

default

Select

use collapse-tags

Select

use collapse-tags-tooltip

Select

use max-collapse-tags

Select

Custom template

You can customize HTML templates for options.

Insert customized HTML templates into the slot of el-option.

Select

Header of the dropdown 2.4.3

You can customize the header of the dropdown.

Use slot to customize the content.

Select

You can customize the footer of the dropdown.

Use slot to customize the content.

Select

Grouping

Display options in groups.

Use el-option-group to group the options, and its label attribute stands for the name of the group.

Select

Option filtering

You can filter options for your desired ones.

Adding filterable to el-select enables filtering. By default, Select will find all the options whose label attribute contains the input value. If you prefer other filtering strategies, you can pass the filter-method. filter-method is a Function that gets called when the input value changes, and its parameter is the current input value.

Select

Enter keywords and search data from server.

Set the value of filterable and remote with true to enable remote search, and you should pass the remote-method. remote-method is a Function that gets called when the input value changes, and its parameter is the current input value. Note that if el-option is rendered with the v-for directive, you should add the key attribute for el-option. Its value needs to be unique, such as item.value in the following example.

default

Please enter a keyword

use remote-show-suffix

Please enter a keyword

Create new items

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

By using the allow-create attribute, users can create new items by typing in the input box. Note that for allow-create to work, filterable must be true. This example also demonstrates default-first-option. When this attribute is set to true, you can select the first option in the current option list by hitting enter without having to navigate with mouse or arrow keys.

Choose tags for your article

Use value-key attribute

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

By using the value-key attribute, data with duplicate labels can be properly handled. The value of the label property is duplicated, but the option can be identified through the id.

Select

selected option's description: no select

Custom Tag 2.5.0

You can customize tags.

Insert customized tags into the slot of el-select. collapse-tags, collapse-tags-tooltip, max-collapse-tags will not work.

Custom Loading 2.5.2

Override loading content.

loading icon1

Please enter a keyword

loading icon2

Please enter a keyword

Empty Values 2.7.0

If you want to support empty string, please set empty-values to [null, undefined].

If you want to change the clear value to null, please set value-on-clear to null.

Custom Label 2.7.4

You can customize label.

: Option1

Select API

Select Attributes

NameDescriptionTypeDefault
model-value / v-modelbinding valuestring / number / boolean / object / array
multiplewhether multiple-select is activatedbooleanfalse
disabledwhether Select is disabledbooleanfalse
value-keyunique identity key name for value, required when value is an objectstringvalue
sizesize of Inputenum
clearablewhether select can be clearedbooleanfalse
collapse-tagswhether to collapse tags to a text when multiple selectingbooleanfalse
collapse-tags-tooltip 2.3.0whether show all selected tags when mouse hover text of collapse-tags. To use this, collapse-tags must be truebooleanfalse
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 / lightenum / stringlight
autocompletethe autocomplete attribute of select inputstringoff
placeholderplaceholder, default is 'Select'string
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
remote-show-suffixin remote search method show suffix iconbooleanfalse
loadingwhether Select is loading data from serverbooleanfalse
loading-textdisplayed text while loading data from server, default is 'Loading'string
no-match-textdisplayed text when no data matches the filtering query, you can also use slot empty, default is 'No matching data'string
no-data-textdisplayed text when there is no options, you can also use slot empty, default is 'No data'string
popper-classcustom class name for Select's dropdownstring''
reserve-keywordwhen multiple and filterable is true, whether to reserve current keyword after selecting an optionbooleantrue
default-first-optionselect first matching option on enter key. Use with filterable or remotebooleanfalse
teleportedwhether select dropdown is teleported, if true it will be teleported to where append-to setsbooleantrue
append-to 2.8.4which element the select dropdown appends tostring
persistentwhen select dropdown is inactive and persistent is false, select dropdown will be destroyedbooleantrue
automatic-dropdownfor non-filterable Select, this prop decides if the option menu pops up when the input is focusedbooleanfalse
clear-iconcustom clear icon componentstring / objectCircleClose
fit-input-widthwhether the width of the dropdown is the same as the inputbooleanfalse
suffix-iconcustom suffix icon componentstring / objectArrowDown
tag-typetag typeenuminfo
tag-effect 2.7.7tag effectenumlight
validate-eventwhether to trigger form validationbooleantrue
offset 2.8.8offset of the dropdownnumber12
show-arrow 2.8.8whether the dropdown has an arrowbooleantrue
placement 2.2.17position of dropdownenumbottom-start
fallback-placements 2.5.6list of possible positions for dropdown popper.jsarray['bottom-start', 'top-start', 'right', 'left']
max-collapse-tags 2.3.0the max tags number to be shown. To use this, collapse-tags must be truenumber1
popper-optionspopper.js parametersobjectrefer to popper.js doc{}
aria-label a11ysame as aria-label in native inputstring
empty-values 2.7.0empty values of component, see config-providerarray
value-on-clear 2.7.0clear return value, see config-providerstring / number / boolean / Function
suffix-transition deprecatedanimation when dropdown appears/disappears iconbooleantrue

WARNING

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

Select Events

NameDescriptionType
changetriggers when the selected value changesFunction
visible-changetriggers when the dropdown appears/disappearsFunction
remove-tagtriggers when a tag is removed in multiple modeFunction
cleartriggers when the clear icon is clicked in a clearable SelectFunction
blurtriggers when Input blursFunction
focustriggers when Input focusesFunction

Select Slots

NameDescriptionSubtags
defaultoption component listOption Group / Option
header 2.4.3content at the top of the dropdown
footer 2.4.3content at the bottom of the dropdown
prefixcontent as Select prefix
emptycontent when there is no options
tag 2.5.0content as Select tag
loading 2.5.2content as Select loading
label 2.7.4content as Select label

Select Exposes

NameDescriptionType
focusfocus the Input componentFunction
blurblur the Input component, and hide the dropdownFunction
selectedLabel 2.8.5get the currently selected labelobject

Option Group API

Option Group Attributes

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

Option Group Slots

NameDescriptionSubtags
defaultcustomize default contentOption

Option API

Option Attributes

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

Option Slots

NameDescription
defaultcustomize default content

Source

ComponentStyleDocs

Contributors