Form Select
Customize the native <select>'s with custom CSS that changes the element’s initial appearance.
Default
<Select aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Select>
1
2
3
4
5
6
2
3
4
5
6
Sizing
<Select class="mb-3" size="lg" aria-label=".form-select-lg example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Select>
<Select size="sm" aria-label=".form-select-sm example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Select>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
The multiple attribute is also supported:
<Select multiple aria-label="multiple select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Select>
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.
<Select aria-label="Disabled select example" disabled>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Select>
1
2
3
4
5
6
2
3
4
5
6
options prop
You can define options prop; array of options.
<Select :options="options"></Select>
1
const options = [
{value: null, text: 'Please select an option'},
{value: 'a', text: 'This is First option'},
{value: 'b', text: 'Selected Option'},
{value: {C: '3PO'}, text: 'This is an option with object value'},
{value: 'd', text: 'This one is disabled', disabled: true}
];
1
2
3
4
5
6
7
2
3
4
5
6
7
text & value props
Each item of options should have properties value & text. Value of property can be any of type.