Select

React Bootstrap 5 Select

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

Info: This documentation may contain syntax introduced in the MDB5 React 4.0.0 and can be incompatible with previous versions. For old MDBSelect documentation please follow the link.

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

Basic example

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

Basic example of select component that allows you to choose from a number of options.

Show code

Multiselect

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

Show code

Select with label

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

Show code

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.

Show code

Disabled select

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

Show code

Disabled options

Use disabled key on option element to disable specific option.

Show code

Clear button

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

Show code

Custom content

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

Show code

Visible options

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

Show code

Secondary text

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

Show code

Select with search inside a modal

Show code

Select with icons

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

Show code

Validation

Set validation option to true to enable component validation. The validFeedback and invalidFeedback options allow to modify the validation messages.

Show code

Controlled value

Set value prop to control the component value. The onValueChange event allows to handle the value change.

Single selection

For a standard single selection, type of the value should be a number.

Show code

Multi selection

For a multiselect, type of the value should be an array of numbers.

Show code

Controlled open state

Set open property to control the component open state. The onOpen and onClose events allow to handle the open state change.

Show code

Auto select

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

Show code

Hidden selected option

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

Show code

Select with CSS classes

In order to use select with additional CSS classes you need to place it in the div wrapper and use CSS classes on that div. In case you use display classes like .d-lg-none and select is not visible on page load you need to use code from this example to update label width when select became visible.

Show code