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 ​

Name Description Type Default
model-value / v-model binding value string / number / boolean / object / array —
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 enum —
clearable whether select can be cleared boolean false
collapse-tags whether to collapse tags to a text when multiple selecting boolean false
collapse-tags-tooltip 2.3.0 whether show all selected tags when mouse hover text of collapse-tags. To use this, collapse-tags must be true 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 enum / string light
autocomplete the autocomplete attribute of select input string off
placeholder placeholder, default is 'Select' string —
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 —
remote-show-suffix in remote search method show suffix icon boolean false
loading whether Select is loading data from server boolean false
loading-text displayed text while loading data from server, default is 'Loading' string —
no-match-text displayed text when no data matches the filtering query, you can also use slot empty, default is 'No matching data' string —
no-data-text displayed text when there is no options, you can also use slot empty, default is 'No data' string —
popper-class custom class name for Select's dropdown string ''
reserve-keyword when multiple and filterable 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
teleported whether select dropdown is teleported to the body boolean true
append-to 2.8.4 which element the select dropdown appends to string —
persistent when select dropdown is inactive and persistent is false, select dropdown will be destroyed boolean 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 / object 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 / object ArrowDown
suffix-transition deprecated animation when dropdown appears/disappears icon boolean true
tag-type tag type enum info
tag-effect 2.7.7 tag effect enum light
validate-event whether to trigger form validation boolean true
placement 2.2.17 position of dropdown enum bottom-start
fallback-placements 2.5.6 list of possible positions for dropdown popper.js array ['bottom-start', 'top-start', 'right', 'left']
max-collapse-tags 2.3.0 the max tags number to be shown. To use this, collapse-tags must be true number 1
popper-options popper.js parameters objectrefer to popper.js doc {}
aria-label a11y same as aria-label in native input string —
empty-values 2.7.0 empty values of component, see config-provider array —
value-on-clear 2.7.0 clear return value, see config-provider string / number / boolean / Function —

WARNING

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

Select Events ​

Name Description Type
change triggers when the selected value changes Function
visible-change triggers when the dropdown appears/disappears Function
remove-tag triggers when a tag is removed in multiple mode Function
clear triggers when the clear icon is clicked in a clearable Select Function
blur triggers when Input blurs Function
focus triggers when Input focuses Function

Select Slots ​

Name Description Subtags
default option component list Option Group / Option
header 2.4.3 content at the top of the dropdown —
footer 2.4.3 content at the bottom of the dropdown —
prefix content as Select prefix —
empty content when there is no options —
tag 2.5.0 content as Select tag —
loading 2.5.2 content as Select loading —
label 2.7.4 content as Select label —

Select Exposes ​

Method Description Type
focus focus the Input component Function
blur blur the Input component, and hide the dropdown Function

Option Group API ​

Option Group Attributes ​

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

Option Group Slots ​

Name Description Subtags
default customize default content Option

Option API ​

Option Attributes ​

Name Description Type 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
default customize default content

Source ​

Component • Style • Docs

Contributors ​