Bootstrap Vue Select Component
Bootstrap Vue select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
On this page
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
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
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
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
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
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
2
3
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| html-size | Specifies the number of visible options in a drop-down list. | number | - | - |
| invalid | Set component validation state to invalid. | boolean | - | |
| model-value | The default name for a value passed using v-model. | string | - | - |
| options | Options 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[] | - | - |
| size | Size the component small or large. | string | 'sm' | 'lg' | - |
| valid | Set component validation state to valid. | boolean | - |
Events
| Event name | Description | Properties |
|---|---|---|
| change | Event occurs when when a user changes the selected option of a <select> element. | |
| update-model-value | Emit the new value whenever there’s a change event. |