Select

Select component to select value from options.

When To Use

A dropdown menu for displaying choices - an elegant alternative to the native <select> element.
Utilizing Radio is recommended when there are fewer total options (less than 5).

Examples

Basic Usage

vue

<template>
  <a-select
    ref="select"
    v-model:value="value"
    style="width: 120px"
    @focus="focus"
    @blur="blur"
    @change="handleChange"
  >
    <a-select-option value="jack">Jack</a-select-option>
    <a-select-option value="lucy">Lucy</a-select-option>
    <a-select-option value="disabled" disabled>Disabled</a-select-option>
    <a-select-option value="Yiminghe">yiminghe</a-select-option>
  </a-select>
</template>

<script setup>
import { ref } from 'vue'

const value = ref('lucy')

const focus = () => {
  console.log('focus')
}

const blur = () => {
  console.log('blur')
}

const handleChange = (value) => {
  console.log(`selected ${value}`)
}
</script>

Select with search field

vue

<template>
  <a-select
    show-search
    placeholder="Select a person"
    option-filter-prop="children"
    style="width: 200px"
    :filter-option="filterOption"
    @focus="handleFocus"
    @blur="handleBlur"
    @change="handleChange"
  >
    <a-select-option value="jack">Jack</a-select-option>
    <a-select-option value="lucy">Lucy</a-select-option>
    <a-select-option value="tom">Tom</a-select-option>
  </a-select>
</template>

<script setup>
const filterOption = (input, option) => {
  return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}

const handleChange = (value) => {
  console.log(`selected ${value}`)
}

const handleBlur = () => {
  console.log('blur')
}

const handleFocus = () => {
  console.log('focus')
}
</script>

Multiple selection

vue

<template>
  <div>
    <a-select
      v-model:value="value1"
      mode="multiple"
      style="width: 100%"
      placeholder="select one country"
      :default-value="['china']"
      @change="handleChange"
    >
      <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
        {{ (i + 9).toString(36) + i }}
      </a-select-option>
    </a-select>
    <br />
    <a-select
      v-model:value="value2"
      mode="multiple"
      size="small"
      style="width: 100%"
      placeholder="select one country"
      :default-value="['china']"
      @change="handleChange"
    >
      <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
        {{ (i + 9).toString(36) + i }}
      </a-select-option>
    </a-select>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const value1 = ref(['china'])
const value2 = ref(['china'])

const handleChange = (value) => {
  console.log(`selected ${value}`)
}
</script>

Sizes

vue

<template>
  <div>
    <a-radio-group v-model:value="size">
      <a-radio-button value="large">Large</a-radio-button>
      <a-radio-button value="default">Default</a-radio-button>
      <a-radio-button value="small">Small</a-radio-button>
    </a-radio-group>
    <br />
    <br />
    <a-select
      v-model:value="value1"
      :size="size"
      default-value="a1"
      style="width: 200px"
      @change="handleChange"
    >
      <a-select-option value="a1">Long, long, long piece of text</a-select-option>
      <a-select-option value="a2">hi!</a-select-option>
    </a-select>
    <br />
    <a-select
      v-model:value="value2"
      mode="multiple"
      :size="size"
      placeholder="Please select"
      :default-value="['a10', 'c12']"
      style="width: 100%"
      @change="handleChange"
    >
      <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
        {{ (i + 9).toString(36) + i }}
      </a-select-option>
    </a-select>
    <br />
    <a-select
      v-model:value="value3"
      mode="tags"
      :size="size"
      placeholder="Please select"
      style="width: 100%"
      @change="handleChange"
    >
      <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
        {{ (i + 9).toString(36) + i }}
      </a-select-option>
    </a-select>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const size = ref('default')
const value1 = ref('a1')
const value2 = ref(['a10', 'c12'])
const value3 = ref([])

const handleChange = (value) => {
  console.log(`selected ${value}`)
}
</script>

API

Select props

Property	Description	Type	Default
allowClear	Show clear button	boolean	false
autoClearSearchValue	Whether the current search will be cleared on selecting an item. Only applies when `mode` is set to `multiple` or `tags`	boolean	true
autoFocus	Get focus by default	boolean	false
bordered	Whether has border style	boolean	true
clearIcon	The custom clear icon	VNode \| slot	-
defaultActiveFirstOption	Whether active first option by default	boolean	true
defaultOpen	Initial open state of dropdown	boolean	-
defaultValue	Initial selected option	string \| string[] \| number \| number[] \| LabeledValue \| LabeledValue[]	-
disabled	Whether disabled select	boolean	false
dropdownClassName	The className of dropdown menu	string	-
dropdownMatchSelectWidth	Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll	boolean \| number	true
dropdownRender	Customize dropdown content	({menuNode: VNode, props}) => VNode \| v-slot	-
dropdownStyle	The style of dropdown menu	CSSProperties	-
fieldNames	Customize node label, value, options field name	object	{ label: `label`, value: `value`, options: `options` }
filterOption	If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded	boolean \| function(inputValue, option)	true
filterSort	Sort function for search options sorting, see Array.sort's compareFunction	(optionA: Option, optionB: Option) => number	-
firstActiveValue	Value of action option by default	string \| string[]	-
getPopupContainer	Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative.	function(triggerNode)	() => document.body
labelInValue	Whether to embed label in value, turn the format of value from `string` to `{key: string, label: vNodes}`	boolean	false
listHeight	Config popup height	number	256
loading	Indicate loading state	boolean	false
maxTagCount	Max tag count to show. `responsive` will cost render performance	number \| `responsive`	-
maxTagPlaceholder	Placeholder for not showing tags	slot \| function(omittedValues)	-
maxTagTextLength	Max tag text length to show	number	-
menuItemSelectedIcon	The custom menuItemSelected icon	VNode \| slot	-
mode	Set mode of Select	`multiple` \| `tags`	-
notFoundContent	Specify content to show when no result matches	string \| slot	`Not Found`
open	Controlled open state of dropdown	boolean	-
option	custom render option by slot	v-slot:option="{value, label, [disabled, key, title]}"	-
optionFilterProp	Which prop value of option will be used for filter if filterOption is true	string	`value`
optionLabelProp	Which prop value of option will render as content of select.	string	`children`
options	Data of the selectOption, manual construction work is no longer needed if this property has been set	array<{value, label, [disabled, key, title]}>	[]
placeholder	Placeholder of select	string \| slot	-
placement	The position where the selection box pops up	`bottomLeft` `bottomRight` `topLeft` `topRight`	bottomLeft
removeIcon	The custom remove icon	VNode \| slot	-
searchValue	The current input "search" text	string	-
showArrow	Whether to show the drop-down arrow	boolean	true
showSearch	Whether select is searchable	boolean	single: false, multiple: true
size	Size of Select input	`large` \| `middle` \| `small`	`middle`
suffixIcon	The custom suffix icon	VNode \| slot	-
tagRender	Customize tag render, only applies when `mode` is set to `multiple` or `tags`	slot \| function(props)	-
tokenSeparators	Separator used to tokenize, only applies when `mode="tags"`	string[]	[]
value(v-model)	Current selected option (considered as a immutable array)	string \| string[] \| number \| number[] \| LabeledValue \| LabeledValue[]	-
virtual	Disable virtual scroll when set to false	boolean	true

Select Events

Events Name	Description	Arguments	Version
blur	Called when blur	function	-
change	Called when select an option or input value change	function(value, option:Option \| Array<Option>)	-
deselect	Called when an option is deselected, param is the selected option's value. Only called for `multiple` or `tags`, effective in multiple or tags mode only	function(string \| number \| LabeledValue)	-
dropdownVisibleChange	Called when dropdown open	function(open)	-
focus	Called when focus	function	-
inputKeyDown	Called when key pressed	function	-
mouseenter	Called when mouse enter	function	-
mouseleave	Called when mouse leave	function	-
popupScroll	Called when dropdown scrolls	function	-
search	Callback function that is fired when input changed	function(value: string)	-
select	Called when an option is selected, the params are option's value (or key) and option instance	function(string \| number \| LabeledValue, option: Option)	-

Option props

Property	Description	Type	Default
class	The additional class to option	string	-
disabled	Disable this option	boolean	false
key	Same usage as `value`. If Vue request you to set this property, you can set it to value of option, and then omit value property	string	-
title	`title` of Select after select this Option	string	-
value	Default to filter with this property	string \| number	-

OptGroup props

Property	Description	Type	Default	Version
key	Key	string	-
label	Group label	string \| slot	-

Select ​

When To Use ​

Examples ​

Basic Usage ​

Select with search field ​

Multiple selection ​

Sizes ​

Tags ​

API ​

Select props ​

Select Events ​

Option props ​

OptGroup props ​

Select

When To Use

Examples

Basic Usage

Select with search field

Multiple selection

Sizes

Tags

API

Select props

Select Events

Option props

OptGroup props