Select

Vue Bootstrap 5 Select

Vue Select fields components are used for collecting user provided information from a list of options.

Note: Read the API tab to find all available options and advanced customization

Basic example

Select options are added using v-model with the options argument. You can get selected values in two ways. The first is to filter the data given in v-model:options by a selected key. The second method is to use v-model:selected which is read-only and stores the currently selected options as a string (single select) or as an array (multiple select).

Basic select behaves like a native one and by default marks the first available option as selected. To change this setting, easily set the preselect property to false.

Multiselect

Add multiple property to the select component to activate multiple mode.

Select with label

It is possible to add select label by setting the label property.

Select with placeholder

Use placeholder property to set placeholder for select input. The placeholder will be displayed when input is focused and no option is selected.

Disabled select

Add disabled attribute to the select component to disable select input.

Disabled options

Use disabled key on option element to disable specific option.

Clear button

Set clearButton property to display the button that will allow to clear current selections.

Custom content

Custom content will be displayed at the end of the select dropdown.

Visible options

Use visibleOptions property to change the number of options that will be displayed in the select dropdown without scrolling.

Secondary text

Add secondary-text key to the specific options to display secondary text.

Search

Set filter property to enable options filtering.

Select with search inside a modal

Option groups

It is possible to group options by using optgroup key.

Select with icons

Add icon property to the specific options to display the option icon.

Validation

Set isValidated and isValid properties to enable component validation. The validFeedback and invalidFeedback options allow to modify the validation messages. Validate method can be set on select's change event.

You can create custom rules and show the validation results via isValidated and isValid properties.

Set value

The setValue method allows to programatically set the component selections.

Select with toggle element

If you want to toggle Select via button, you have to add toggle / open / close function from MDBSelect ref and pin her to this button.

Auto select

Set autoSelect option to true to enable selecting on Tab press.

Hidden selected option

Add the first option with the hidden and selected attributes and an empty value to leave select with no selection.

Related resources