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

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

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

Remote Search

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

vue

<template>
  <div class="flex flex-wrap">
    <div class="m-4">
      <p>default</p>
      <el-select
        v-model="value"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="Please enter a keyword"
        :remote-method="remoteMethod"
        :loading="loading"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div class="m-4">
      <p>use remote-show-suffix</p>
      <el-select
        v-model="value"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="Please enter a keyword"
        remote-show-suffix
        :remote-method="remoteMethod"
        :loading="loading"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

interface ListItem {
  value: string
  label: string
}

const list = ref<ListItem[]>([])
const options = ref<ListItem[]>([])
const value = ref<string[]>([])
const loading = ref(false)

onMounted(() => {
  list.value = states.map((item) => {
    return { value: `value:${item}`, label: `label:${item}` }
  })
})

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      options.value = list.value.filter((item) => {
        return item.label.toLowerCase().includes(query.toLowerCase())
      })
    }, 200)
  } else {
    options.value = []
  }
}

const states = [
  'Alabama',
  'Alaska',
  'Arizona',
  'Arkansas',
  'California',
  'Colorado',
  'Connecticut',
  'Delaware',
  'Florida',
  'Georgia',
  'Hawaii',
  'Idaho',
  'Illinois',
  'Indiana',
  'Iowa',
  'Kansas',
  'Kentucky',
  'Louisiana',
  'Maine',
  'Maryland',
  'Massachusetts',
  'Michigan',
  'Minnesota',
  'Mississippi',
  'Missouri',
  'Montana',
  'Nebraska',
  'Nevada',
  'New Hampshire',
  'New Jersey',
  'New Mexico',
  'New York',
  'North Carolina',
  'North Dakota',
  'Ohio',
  'Oklahoma',
  'Oregon',
  'Pennsylvania',
  'Rhode Island',
  'South Carolina',
  'South Dakota',
  'Tennessee',
  'Texas',
  'Utah',
  'Vermont',
  'Virginia',
  'Washington',
  'West Virginia',
  'Wisconsin',
  'Wyoming',
]
</script>

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

vue

<template>
  <div class="flex flex-wrap">
    <div class="m-4">
      <p>loading icon1</p>
      <el-select
        v-model="value"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="Please enter a keyword"
        :remote-method="remoteMethod"
        :loading="loading"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
        <template #loading>
          <svg class="circular" viewBox="0 0 50 50">
            <circle class="path" cx="25" cy="25" r="20" fill="none" />
          </svg>
        </template>
      </el-select>
    </div>
    <div class="m-4">
      <p>loading icon2</p>
      <el-select
        v-model="value"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="Please enter a keyword"
        :remote-method="remoteMethod"
        :loading="loading"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
        <template #loading>
          <el-icon class="is-loading">
            <svg class="circular" viewBox="0 0 20 20">
              <g
                class="path2 loading-path"
                stroke-width="0"
                style="animation: none; stroke: none"
              >
                <circle r="3.375" class="dot1" rx="0" ry="0" />
                <circle r="3.375" class="dot2" rx="0" ry="0" />
                <circle r="3.375" class="dot4" rx="0" ry="0" />
                <circle r="3.375" class="dot3" rx="0" ry="0" />
              </g>
            </svg>
          </el-icon>
        </template>
      </el-select>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

interface ListItem {
  value: string
  label: string
}

const list = ref<ListItem[]>([])
const options = ref<ListItem[]>([])
const value = ref<string[]>([])
const loading = ref(false)

onMounted(() => {
  list.value = states.map((item) => {
    return { value: `value:${item}`, label: `label:${item}` }
  })
})

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      options.value = list.value.filter((item) => {
        return item.label.toLowerCase().includes(query.toLowerCase())
      })
    }, 3000)
  } else {
    options.value = []
  }
}

const states = [
  'Alabama',
  'Alaska',
  'Arizona',
  'Arkansas',
  'California',
  'Colorado',
  'Connecticut',
  'Delaware',
  'Florida',
  'Georgia',
  'Hawaii',
  'Idaho',
  'Illinois',
  'Indiana',
  'Iowa',
  'Kansas',
  'Kentucky',
  'Louisiana',
  'Maine',
  'Maryland',
  'Massachusetts',
  'Michigan',
  'Minnesota',
  'Mississippi',
  'Missouri',
  'Montana',
  'Nebraska',
  'Nevada',
  'New Hampshire',
  'New Jersey',
  'New Mexico',
  'New York',
  'North Carolina',
  'North Dakota',
  'Ohio',
  'Oklahoma',
  'Oregon',
  'Pennsylvania',
  'Rhode Island',
  'South Carolina',
  'South Dakota',
  'Tennessee',
  'Texas',
  'Utah',
  'Vermont',
  'Virginia',
  'Washington',
  'West Virginia',
  'Wisconsin',
  'Wyoming',
]
</script>

<style>
.el-select-dropdown__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 20px;
}

.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}
.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-color-primary);
  stroke-linecap: round;
}
.loading-path .dot1 {
  transform: translate(3.75px, 3.75px);
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
}
.loading-path .dot2 {
  transform: translate(calc(100% - 3.75px), 3.75px);
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.4s;
}
.loading-path .dot3 {
  transform: translate(3.75px, calc(100% - 3.75px));
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 1.2s;
}
.loading-path .dot4 {
  transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.8s;
}
@keyframes loading-rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}
@keyframes custom-spin-move {
  to {
    opacity: 1;
  }
}
</style>

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
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	`object`refer 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`	—
suffix-transition deprecated	animation when dropdown appears/disappears icon	`boolean`	true

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

Name	Description	Type
focus	focus the Input component	`Function`
blur	blur the Input component, and hide the dropdown	`Function`
selectedLabel 2.8.5	get the currently selected label	`object`

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

Rate

Virtualized Select

Select ​

Basic usage ​

Disabled option ​

Disabled select ​

Clearable single select ​

Basic multiple select ​

Custom template ​

Header of the dropdown 2.4.3 ​

Footer of the dropdown 2.4.3 ​

Grouping ​

Option filtering ​

Remote Search ​

Create new items ​

Use value-key attribute ​

Custom Tag 2.5.0 ​

Custom Loading 2.5.2 ​

Empty Values 2.7.0 ​

Custom Label 2.7.4 ​

Select API ​

Select Attributes ​

Select Events ​

Select Slots ​

Select Exposes ​

Option Group API ​

Option Group Attributes ​

Option Group Slots ​

Option API ​

Option Attributes ​

Option Slots ​

Source ​

Contributors ​

Select

Basic usage

Disabled option

Disabled select

Clearable single select

Basic multiple select

Custom template

Header of the dropdown 2.4.3

Footer of the dropdown 2.4.3

Grouping

Option filtering

Remote Search

Create new items

Use value-key attribute

Custom Tag 2.5.0

Custom Loading 2.5.2

Empty Values 2.7.0

Custom Label 2.7.4

Select API

Select Attributes

Select Events

Select Slots

Select Exposes

Option Group API

Option Group Attributes

Option Group Slots

Option API

Option Attributes

Option Slots

Source

Contributors