Select

Basic Usage

Basic usage. Use v-model for two-way data binding.

In single-select mode, value only accepts strings and numbers. In multi-select mode, it only accepts arrays. The component automatically returns selected data based on the Option value.

You can add style to the Select, such as width.

<template>
  <div>
    <b-select v-model="select" style="width: 200px" clearable>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>
    <span>{{ select }}</span>
  </div>
</template>

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

const select = ref('')
const cityList = [
  { value: 'beijing', label: 'Beijing' },
  { value: 'nanjing', label: 'Nanjing' },
  { value: 'shanghai', label: 'Shanghai' },
  { value: 'xuzhou', label: 'Xuzhou' },
  { value: 'guangzhou', label: 'Guangzhou' },
  { value: 'shenzhen', label: 'Shenzhen' }
]
</script>

Disabled Options and Disabled State

Disabled state and individual option disabling can be configured.

<template>
  <div>
    <b-select v-model="select" style="width: 200px" clearable>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      ></b-option>
    </b-select>
    &nbsp;
    <b-select v-model="select" style="width: 200px" disabled>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>
  </div>
</template>

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

const select = ref('')
const cityList = [
  { value: 'beijing', label: 'Beijing' },
  { value: 'nanjing', label: 'Nanjing' },
  { value: 'shanghai', label: 'Shanghai', disabled: true },
  { value: 'xuzhou', label: 'Xuzhou' },
  { value: 'guangzhou', label: 'Guangzhou' },
  { value: 'shenzhen', label: 'Shenzhen' }
]
</script>

Other States

Clearable, grouped, or custom template display.

<template>
  <div>
    <b-select v-model="select" style="width: 200px" clearable placeholder="Clearable">
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>

    <b-select v-model="select" style="width: 200px; margin-left: 20px" placeholder="Grouped">
      <b-option-group label="Municipalities">
        <b-option value="beijing" label="Beijing"></b-option>
        <b-option value="shanghai" label="Shanghai"></b-option>
      </b-option-group>
      <b-option-group label="Popular Cities">
        <b-option value="xuzhou" label="Xuzhou"></b-option>
        <b-option value="nanjing" label="Nanjing"></b-option>
        <b-option value="suzhou" label="Guangzhou"></b-option>
        <b-option value="shenzhen" label="Shenzhen"></b-option>
      </b-option-group>
    </b-select>

    <b-select v-model="select" style="width: 200px; margin-left: 20px" placeholder="Customoption">
      <b-option value="beijing" label="Beijing">
        <span>Beijing</span>
        <span style="float: right; color: #ccc">beijing</span>
      </b-option>
      <b-option value="shanghai" label="Shanghai">
        <span>Shanghai</span>
        <span style="float: right; color: #ccc">shanghai</span>
      </b-option>
      <b-option value="xuzhou" label="Xuzhou">
        <span>Xuzhou</span>
        <span style="float: right; color: #ccc">xuzhou</span>
      </b-option>
    </b-select>
  </div>
</template>

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

const select = ref('')
const cityList = [
  { value: 'beijing', label: 'Beijing' },
  { value: 'nanjing', label: 'Nanjing' },
  { value: 'shanghai', label: 'Shanghai' },
  { value: 'xuzhou', label: 'Xuzhou' },
  { value: 'guangzhou', label: 'Guangzhou' },
  { value: 'shenzhen', label: 'Shenzhen' }
]
</script>

Search Mode

Search and filter options.

<template>
  <div>
    <b-select v-model="select" style="width: 200px" filterable>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>
    <span>{{ select }}</span>
  </div>
</template>

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

const select = ref('')
const cityList = [
  { value: 'beijing', label: 'Beijing' },
  { value: 'nanjing', label: 'Nanjing' },
  { value: 'shanghai', label: 'Shanghai' },
  { value: 'xuzhou', label: 'Xuzhou' },
  { value: 'guangzhou', label: 'Guangzhou' },
  { value: 'shenzhen', label: 'Shenzhen' }
]
</script>

Multi-Select and Collapse

Multi-selection is supported.

[]

<template>
  <div>
    <b-select v-model="select" style="width: 300px" multiple>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>
    <b-select v-model="select" style="width: 300px; margin-left: 20px" multiple collapse-tags>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>
    <span>{{ select }}</span>
  </div>
</template>

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

const select = ref([])
const cityList = [
  { value: 'beijing', label: 'BeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijing' },
  { value: 'nanjing', label: 'Nanjing' },
  { value: 'shanghai', label: 'Shanghai' },
  { value: 'xuzhou', label: 'Xuzhou' },
  { value: 'guangzhou', label: 'Guangzhou' },
  { value: 'shenzhen', label: 'Shenzhen' },
  { value: 'xuzhou', label: 'Xuzhou' },
  { value: 'guangzhou', label: 'Guangzhou' },
  { value: 'shenzhen', label: 'Shenzhen' }
]
</script>

Prefix Mode

You can set a prefix for the dropdown.

<template>
  <div style="width: 200px">
    <b-select v-model="select">
      <template #prefix>
        <i class="b-iconfont b-icon-alert"></i>
      </template>
      <b-option value="beijing" label="Beijing"></b-option>
      <b-option value="shanghai" label="Shanghai"></b-option>
      <b-option value="xuzhou" label="Xuzhou"></b-option>
      <b-option value="nanjing" label="Nanjing"></b-option>
    </b-select>
  </div>
</template>

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

const select = ref('')
</script>

Create New Item

Allows creating entries not in the list. Use allow-create to enable input and creation; filterable must be true.

[]

<template>
  <b-row :gutter="20">
    <b-col :span="8">
      <b-select
        v-model="selected"
        multiple
        filterable
        allow-create
        default-first-option
        placeholder="Please selectCity"
      >
        <b-option
          v-for="item in cityList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></b-option>
      </b-select>
    </b-col>
    <b-col :span="16">
      <div style="height: 32px; line-height: 32px">{{ selected }}</div>
    </b-col>
  </b-row>
</template>

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

const selected = ref([])
const cityList = [
  { value: 'beijing', label: 'Beijing' },
  { value: 'nanjing', label: 'Nanjing' },
  { value: 'shanghai', label: 'Shanghai' },
  { value: 'xuzhou', label: 'Xuzhou' },
  { value: 'guangzhou', label: 'Guangzhou' },
  { value: 'shenzhen', label: 'Shenzhen' }
]
</script>

Sizes

Four sizes are available:

<template>
  <b-row :gutter="20">
    <b-col :span="6">
      <b-select v-model="select" clearable size="large">
        <b-option
          v-for="item in cityList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></b-option>
      </b-select>
    </b-col>
    <b-col :span="6">
      <b-select v-model="select" clearable>
        <b-option
          v-for="item in cityList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></b-option>
      </b-select>
    </b-col>
    <b-col :span="6">
      <b-select v-model="select" clearable size="small">
        <b-option
          v-for="item in cityList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></b-option>
      </b-select>
    </b-col>
    <b-col :span="6">
      <b-select v-model="select" clearable size="mini">
        <b-option
          v-for="item in cityList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></b-option>
      </b-select>
    </b-col>
  </b-row>
</template>

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

const select = ref('')
const cityList = [
  { value: 'beijing', label: 'Beijing' },
  { value: 'nanjing', label: 'Nanjing' },
  { value: 'shanghai', label: 'Shanghai' },
  { value: 'xuzhou', label: 'Xuzhou' },
  { value: 'guangzhou', label: 'Guangzhou' },
  { value: 'shenzhen', label: 'Shenzhen' }
]
</script>

Select props

Parameter	Description	Type	Options	Default
v-model	Specifies the value of the selected item. Supports v-model for two-way binding.	String / Number / Boolean / Object	—	—
multiple	Multi-select	Boolean	—	false
disabled	Disable d	Boolean	—	false
clearable	Clear options, only effective in single-select mode	Boolean	—	false
filterable	Enable search	Boolean	—	false
size	Select size	String	large / small / default / mini	default
placeholder	Placeholder text	String	—	—
value-key	Key name used as the unique identifier for value. Required when the bound value is an object.	string	—	value
no-match-text	Text displayed when no search results match, can also use #empty slot to set	String	—	No matching data
no-data-tex	Text displayed when options are empty	String	—	No data
allow-create	Whether to allow creating new items not in the list. Must be used with filterable	Boolean	—	false
filter-method	Custom search method	Function	—	—
remote	Whether to enable remote search	boolean	—	false
loading	Whether data is currently being fetched from remote	boolean	—	false
loading-text	Text displayed during remote loading	boolean	—	Loading...
placement	Expansion direction of the dropdown	String	top / bottom / top-start / bottom-start / top-end / bottom-end	bottom-start
append-to-body	Append the overlay to body	Boolean	—	true
multiple-limit	Maximum number of selections allowed in multi-select mode	Number	—	—
collapse-tags	Whether to collapse tags in multi-select mode	Boolean	—	false
popper-class	Custom class name for the popup	String	—	—
default-first-option	When pressing Enter in the input, select the first matching option. Must be used with filterable or remote	Boolean	—	false
clear-icon	Class name for the clear icon	String	—	close-circle-fill

Select events

Event Name	Description	Return Value
change	Triggered when the selected option changes, returns value by default	Currently selected item
clear	Triggered when the clear button is clicked	—
visible-change	Triggered when the dropdown appears/hides	true when appearing, false when hiding
remove-tag	Triggered when a tag is removed in multi-select mode	Value of the removed tag
blur	Triggered when focus is lost	(event: Event)
focus	Triggered when focus is gained	(event: Event)

Select slot

Name	Description
prefix	Custom prefix icon inside the Select
empty	Content when no options are available

Option props

Parameter	Description	Type	Options	Default
value	Option value. Filtering is based on this property value by default. Required.	string/number	—	—
label	Option display content. By default the slot content is read. If no slot, this label value is read first. If no label, the value is read.	String	—	—
disabled	Disable the current item	Boolean	—	false

OptionGroup props

Parameter	Description	Type	Options	Default
label	Group name	String	—	—
disabled	Disable all options under this group	Boolean	—	false

Select ​

Basic Usage ​

Disabled Options and Disabled State ​

Other States ​

Search Mode ​

Multi-Select and Collapse ​

Prefix Mode ​

Create New Item ​

Sizes ​

Select props ​

Select events ​

Select slot ​

Option props ​

OptionGroup props ​