Select

Basic

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

You can even define option groups with the options prop:

Manually

Or manually provide your options and option groups:

Feel free to mix the options prop with <b-form-select-option> and <b-form-select-option-group>. Manually placed options and option groups will appear below the options generated via the options prop. To place manual options and option groups above the options specified by the options prop, use the named slot first.

Changing the option field names

If you want to customize the field property names (for example using name field for display text) you can easily change them by setting the text-field, html-field, value-field, and disabled-field props to a string that contains the property name you would like to use:

Value in single mode

In non multiple mode, <b-form-select> returns the a single value of the currently selected option.

Select sizing (displayed rows)

You can use the select-size prop to switch the custom select into a select list-box, rather than a dropdown. Set the select-size prop to a numerical value greater than 1 to control how many rows of options are visible.

Note when select-size is set to a value greater than 1, the Bootstrap v4 custom styling will not be applied, unless the multiple prop is also set.

Note that not all mobile browsers will show the select as a list-box.

Value in multiple mode

In multiple mode, <b-form-select> always returns an array of option values. You must provide an array reference as your v-model when in multiple mode.