Select
When there are plenty of options, use a drop-down menu to display and select desired ones.
TIP
This component requires the <client-only></client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).
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.
Remote Search
Enter keywords and search data from server.
Create new items
Create and select new items that are not included in select options
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.
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 filter 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 |
| 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 |
| validate-event | whether to trigger form validation | boolean | true |
| placement 2.2.17 | position of dropdown | enum | bottom-start |
| 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 | — |
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 |
| prefix | content as Select prefix | — |
| empty | content when there is no options | — |
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 |