Form Select

Bootstrap custom <select> using custom styles. Optionally specify options based on an array, array of objects, or an object.

Edit this page on GitHub

Overview

Generate your select options by passing an array or object to the options props:

Selected:

HTML

vue

```vue
<template>
  <BFormSelect v-model="selected" :options="ex1Options" />

  <BFormSelect v-model="selected" :options="ex1Options" size="sm" class="mt-3" />

  <div class="mt-3">
    Selected: <strong>{{ selected }}</strong>
  </div>
</template>

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

const ex1Options = [
  {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},
]

const selected = ref(null)
</script>

You can even define option groups with the options prop:

Selected:

HTML

vue

<template>
  <BFormSelect v-model="selected" :options="ex1GroupOptions" />

  <div class="mt-3">
    Selected: <strong>{{ selected }}</strong>
  </div>
</template>

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

const ex1GroupOptions = [
  {value: null, text: 'Please select an option'},
  {value: 'a', text: 'This is First option'},
  {value: 'b', text: 'Selected Option', disabled: true},
  {
    label: 'Grouped options',
    options: [
      {value: {C: '3PO'}, text: 'Option with object value'},
      {value: {R: '2D2'}, text: 'Another option with object value'},
    ],
  },
]

const selected = ref()
</script>

Or manually provide your options and option groups:

Selected:

HTML

vue

<template>
  <BFormSelect v-model="selected">
    <BFormSelectOption :value="null">Please select an option</BFormSelectOption>
    <BFormSelectOption value="a">Option A</BFormSelectOption>
    <BFormSelectOption value="b" disabled>Option B (disabled)</BFormSelectOption>
    <BFormSelectOptionGroup label="Grouped options">
      <BFormSelectOption :value="{C: '3PO'}">Option with object value</BFormSelectOption>
      <BFormSelectOption :value="{R: '2D2'}">Another option with object value</BFormSelectOption>
    </BFormSelectOptionGroup>
  </BFormSelect>

  <div class="mt-3">
    Selected: <strong>{{ selected }}</strong>
  </div>
</template>

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

const selected = ref(null)
</script>

Selected:

HTML

vue

<template>
  <BFormSelect v-model="selected" :options="exFirstSlotOptions" class="mb-3">
    <!-- This slot appears above the options from 'options' prop -->
    <template #first>
      <BFormSelectOption :value="null" disabled>-- Please select an option --</BFormSelectOption>
    </template>

    <!-- These options will appear after the ones from 'options' prop -->
    <BFormSelectOption value="C">Option C</BFormSelectOption>
    <BFormSelectOption value="D">Option D</BFormSelectOption>
  </BFormSelect>

  <div class="mt-3">
    Selected: <strong>{{ selected }}</strong>
  </div>
</template>

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

const exFirstSlotOptions = [
  {value: 'A', text: 'Option A (from options prop)'},
  {value: 'B', text: 'Option B (from options prop)'},
]

const selected = ref(null)
</script>

const options = ['A', 'B', 'C', {text: 'D', value: {d: 1}, disabled: true}, 'E', 'F']

If an array entry is a string, it will be used for both the generated value and text fields.

You can mix using strings and objects in the array.

Internally, BootstrapVueNext will convert the above array to the following array (the array of objects) format:

const options = [
  {text: 'A', value: 'A', disabled: false},
  {text: 'B', value: 'B', disabled: false},
  {text: 'C', value: 'C', disabled: false},
  {text: 'D', value: {d: 1}, disabled: true},
  {text: 'E', value: 'E', disabled: false},
  {text: 'F', value: 'F', disabled: false},
]

Options as an array of objects

const options = [
  {text: 'Item 1', value: 'first'},
  {text: 'Item 2', value: 'second'},
  {text: 'Item 3', value: 'third', disabled: true},
  {text: 'Item 4'},
  {text: 'Item 5', value: {foo: 'bar', baz: true}},
]

If value is missing, then text will be used as both the value and text fields.

Internally, BootstrapVueNext will convert the above array to the following array (the array of objects) format:

const options = [
  {text: 'Item 1', value: 'first', disabled: false},
  {text: 'Item 2', value: 'second', disabled: false},
  {text: 'Item 3', value: 'third', disabled: true},
  {text: 'Item 4', value: 'Item 4', disabled: false},
  {text: 'Item 5', value: 'E', disabled: false},
]

Selected: A

HTML

vue

<template>
  <BFormSelect
    v-model="selected"
    :options="exFieldNamesOptions"
    class="mb-3"
    value-field="item"
    text-field="name"
    disabled-field="notEnabled"
  />

  <div class="mt-3">
    Selected: <strong>{{ selected }}</strong>
  </div>
</template>

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

const exFieldNamesOptions = [
  {item: 'A', name: 'Option A'},
  {item: 'B', name: 'Option B'},
  {item: 'D', name: 'Option C', notEnabled: true},
  {item: {d: 1}, name: 'Option D'},
]

const selected = ref('A')
</script>

Options groups

To define option groups, just add an object with a label prop as the groups name and a options property with the array of options of the group.

const options = [
  {text: 'Item 1', value: 'first'},
  {text: 'Item 2', value: 'second'},
  {
    label: 'Grouped options',
    options: [{text: 'Item< 3', value: 'third', disabled: true}, {text: 'Item 4'}],
  },
  {text: 'Item 5', value: {foo: 'bar', baz: true}},
]

Selected:

HTML

vue

<template>
  <BFormSelect v-model="selected" :options="ex1Options" />

  <div class="mt-3">
    Selected: <strong>{{ selected }}</strong>
  </div>
</template>

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

const ex1Options = [
  {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},
]

const selected = ref()
</script>

Selected:

HTML

vue

<template>
  <BFormSelect v-model="selected" :options="ex1Options" :select-size="4" />

  <div class="mt-3">
    Selected: <strong>{{ selected }}</strong>
  </div>
</template>

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

const ex1Options = [
  {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},
]

const selected = ref()
</script>

Selected: [ "b" ]

HTML

vue

<template>
  <BFormSelect v-model="selected" :options="exMultiOptions" multiple :select-size="4" />

  <div class="mt-3">
    Selected: <strong>{{ selected }}</strong>
  </div>
</template>

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

const exMultiOptions = [
  {value: 'a', text: 'This is First option'},
  {value: 'b', text: 'Default Selected Option'},
  {value: 'c', text: 'This is another option'},
  {value: 'd', text: 'This one is disabled', disabled: true},
  {value: 'e', text: 'This is option e'},
  {value: 'f', text: 'This is option f'},
  {value: 'g', text: 'This is option g'},
]

const selected = ref(['b'])
</script>

Component Reference

`<BFormSelect>`

View Source

<BFormSelect> Properties
<BFormSelect> Events
<BFormSelect> Slots

Adding styles: select

Properties

Prop	Type	Default	Description
aria-invalid	`AriaInvalid`	`undefined`	Sets the `aria-invalid` attribute value on the wrapper element. When not provided, the `state` prop will control the attribute
autofocus	`boolean`	`false`	When set to `true`, attempts to auto-focus the control when it is mounted, or re-activated when in a keep-alive. Does not set the `autofocus` attribute on the control
disabled	`boolean`	`false`	When set to `true`, disables the component's functionality and places it in a disabled state
disabled-field	`string`	`'disabled'`	Field name in the `options` array that should be used for the disabled state
form	`string`	`undefined`	ID of the form that the form control belongs to. Sets the `form` attribute on the control
id	`string`	`undefined`	Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed
label-field	`string`	`'label'`	The key to use from the option object to get the label
model-value	`SelectValue`	`''`	The value of the select control
multiple	`boolean`	`false`	When set, allows multiple options to be selected (multi-select)
name	`string`	`undefined`	Sets the value of the `name` attribute on the form control
options	`unknown[] \| Record<string, unknown>`	`'() => []'`	Array of items to render in the component
options-field	`string`	`'options'`	The key to use from the option object to get the options
plain	`boolean`	`false`	Render the form control in plain mode, rather than custom styled mode
required	`boolean`	`undefined`	Adds the `required` attribute to the form control
select-size	`Numberish`	`0`	When set to a number larger than 0, will set the number of display option rows. Note not all browser will respect this setting
size	`Size`	`'md'`	Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'
state	`ValidationState`	`undefined`	Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
text-field	`string`	`'text'`	Field name in the `options` array that should be used for the text label
value-field	`string`	`'value'`	Field name in the `options` array that should be used for the value

Events

Event	Args	Description
update:model-value	`value: SelectValue` - Currently selected value of the select control.	Emitted when the selected value(s) are changed. Looking for the `input` or `change` event - use `update:model-value` instead.

Slots

Name	Scope	Description
default		Content to place in the form select
first		Slot to place options or option groups above options provided via the 'options' prop
option	`value: any (T)` - The value of the option `text: string` - The text of the option `disabled: boolean` - Is the option disabled	Use this slot to have finer control over the content render inside each select item

`<BFormSelectOption>`

View Source

<BFormSelectOption> Properties
<BFormSelectOption> Slots

Adding styles: option

Properties

Prop	Type	Default	Description
disabled	`boolean`	`false`	The disabled state of the option
value	`any`	`undefined`	The value of the option

Slots

Name	Scope	Description
default		Content to place in the form select option

`<BFormSelectOptionGroup>`

View Source

<BFormSelectOptionGroup> Properties
<BFormSelectOptionGroup> Slots

Adding styles: optgroup

Properties

Prop	Type	Default	Description
disabled-field	`string`	`'disabled'`	Field name in the `options` array that should be used for the disabled state
label	`string`	`undefined`	The label for the option group
options	`readonly (unknown \| Record<string, unknown>)[]`	`'() => []'`	Array of items to render in the component
text-field	`string`	`'text'`	Field name in the `options` array that should be used for the text label
value-field	`string`	`'value'`	Field name in the `options` array that should be used for the value

Slots

Name	Scope	Description
default		Slot to place options above options provided via the 'options' prop
first		Content to place in the form select option group
option	`value: any (T)` - The value of the option `text: string` - The text of the option `disabled: boolean` - Is the option disabled	Use this slot to have finer control over the content render inside each select item

Form Select ​

Overview ​

Options as an array of objects ​

Options groups ​

Component Reference

<BFormSelect>

Properties

Events

Slots

<BFormSelectOption>

Properties

Slots

<BFormSelectOptionGroup>

Properties

Slots

Form Select

Overview

Options as an array of objects

Options groups

`<BFormSelect>`

`<BFormSelectOption>`

`<BFormSelectOptionGroup>`