Select

React Bootstrap 5 Select

React 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 fields components are used for collecting user provided information from a list of options.

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 element 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.



Select with icons

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


Validation

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

Select - API


Import


        import { MDBSelect } from 'mdb-react-ui-kit';
      

Properties

MDBSelect

Name Type Default Description Example
className String '' Add custom class to the MDBSelect <MDBSelect className="class" />
clearBtn Boolean false Add clear btn to MDBSelect <MDBSelect clearBtn />
data object[] {} Add data to MDBSelect <MDBSelect data={} />
tag String 'div' Tag to select input wrapper in MDBSelect <MDBSelect tag="span" />
tagWrapper String 'div' Tag to select dropdown wrapper MDBSelect <MDBSelect tag="span" />
visibleOptions String | Number '5' Change visible options in MDBSelect <MDBSelect visibleOptions="3" />
placeholder String '' Add placeholder to MDBSelect <MDBSelect placeholder="test" />
disabled Boolean false Add disabled to MDBSelect input <MDBSelect placeholder="test" />
search Boolean false Add search to MDBSelect input in dropdown <MDBSelect search />
multiple Boolean false Change select to multiselect <MDBSelect multiple />
label String 'Example Label' Change label of input <MDBSelect label="test" />
noResultLabel String 'No results' Change label in option search if there is no records in search value. <MDBSelect noResultLabel="test" />
searchLabel String 'Search...' Change placeholder in option search. <MDBSelect noResultLabel="test" />
selectAllLabel String 'Select all' Change label to select all option in multiselect <MDBSelect selectAllLabel="test" />
validation Boolean false Enables validation for the MDBSelect <MDBSelect validation />
invalidFeedback String '' Changes the invalid feedback message <MDBSelect validation invalidFeedback="Invalid value" />
validFeedback String '' Changes the valid feedback message <MDBSelect validation validFeedback="Valid value" />

Methods

Name Type Default Description Example
getSelectedValue Function ()=>{} This method return selected value in MDBSelect <MDBSelect getSelectedValue={(e)=>console.log(e)} className="class" />
getData Function ()=>{} This method return data if something change in prop data in MDBSelect <MDBSelect getData={(e)=>console.log(e)} className="class" />