Default
Custom styles are limited to the FormSelect's initial appearance and cannot modify the Options due to browser limitations.
- Selected
- 2
vue
<template>
<BFormSelect
v-model="selected_sample"
aria-label="Default select example"
>
<option>
Open this select menu
</option>
<option value="1">
One
</option>
<option value="2">
Two
</option>
<option value="3">
Three
</option>
</BFormSelect>
<b-dl margin="t-5">
<b-dt col="sm-3">
Selected
</b-dt>
<b-dd col="sm-9">
{{ selected_sample }}
</b-dd>
</b-dl>
</template>
<script setup>
const selected_sample = ref('2');
</script>
Sizing
You may also choose from small and large custom selects to match our similarly sized text inputs.
vue
<template>
<BFormSelect
v-model="selected_sample"
size="lg"
aria-label="size 3 select example"
margin="b-3"
>
<option>
Open this select menu
</option>
<option value="1">
One
</option>
<option value="2">
Two
</option>
<option value="3">
Three
</option>
</BFormSelect>
<BFormSelect
v-model="selected_sample"
size="sm"
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>
</BFormSelect>
</template>
<script setup>
const selected_sample = ref('Open this select menu');
</script>
The multiple attribute is also supported:
- Selected
- [2,3]
vue
<template>
<BFormSelect
v-model="selected"
length="4"
multiple
aria-label="size 3 select example"
>
<option
value=""
selected
>
Open this select menu
</option>
<option value="1">
One
</option>
<option value="2">
Two
</option>
<option value="3">
Three
</option>
</BFormSelect>
<b-dl margin="t-5">
<b-dt col="sm-3">
Selected
</b-dt>
<b-dd col="sm-9">
{{ JSON.stringify(selected) }}
</b-dd>
</b-dl>
</template>
<script setup>
const selected = ref([2, 3]);
</script>
As is the length attribute:
vue
<template>
<BFormSelect
v-model="selected_sample"
length="3"
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>
</BFormSelect>
</template>
<script setup>
const selected_sample = ref('Open this select menu');
</script>
Disabled
Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.
vue
<template>
<BFormSelect
v-model="selected_sample"
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>
</BFormSelect>
</template>
<script setup>
const selected_sample = ref('Open this select menu');
</script>