Bootstrap Vue Select Component

Bootstrap Vue select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.

Default

<CFormSelect
  aria-label="Default select example"
  :options="[
    'Open this select menu',
    { label: 'One', value: '1' },
    { label: 'Two', value: '2' },
    { label: 'Three', value: '3', disabled: true }
  ]">
</CFormSelect>

// You can also add options manually
<CFormSelect aria-label="Default select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" disabled>Three</option>
</CFormSelect>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Sizing

You may also choose from small and large custom selects to match our similarly sized text inputs.

<CFormSelect size="lg" class="mb-3" aria-label="Large select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</CFormSelect>
<CFormSelect size="sm" class="mb-3" aria-label="Small select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</CFormSelect>
1
2
3
4
5
6
7
8
9
10
11
12

The multiple attribute is also supported:

<CFormSelect size="lg" multiple aria-label="Multiple select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</CFormSelect>
1
2
3
4
5
6

As is the html-size property:

<CFormSelect :html-size="3" multiple aria-label="size 3 select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</CFormSelect>
1
2
3
4
5
6

Disabled

Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.

<CFormSelect aria-label="Disabled select example" disabled>
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</CFormSelect>
1
2
3
4
5
6

API

CFormSelect

import { CFormSelect } from '@coreui/bootstrap-vue'
// or
import CFormSelect from '@coreui/bootstrap-vue/src/components/form/CFormSelect'
1
2
3

Props

Prop nameDescriptionTypeValuesDefault
html-sizeSpecifies the number of visible options in a drop-down list.number--
invalidSet component validation state to invalid.boolean-
model-valueThe default name for a value passed using v-model.string--
optionsOptions list of the select component. Available keys: label, value, disabled.
Examples:
- :options="[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]"
- :options="['js', 'html']"
Option[] | string[]--
sizeSize the component small or large.string'sm' | 'lg'-
validSet component validation state to valid.boolean-

Events

Event nameDescriptionProperties
changeEvent occurs when when a user changes the selected option of a <select> element.
update-model-valueEmit the new value whenever there’s a change event.