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

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

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    { text: 'One', value: 1 },
                    { text: 'Two', value: 2 },
                    { text: 'Three', value: 3 },
                    { text: 'Four', value: 4 },
                    { text: 'Five', value: 5 },
                    { text: 'Six', value: 6 },
                    { text: 'Seven', value: 7 },
                    { text: 'Eight', value: 8 },
                  ]}
                />
              );
            }

Multiselect

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

Example label

Show code

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

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    { text: 'One' },
                    { text: 'Two' },
                    { text: 'Three' },
                    { text: 'Four' },
                    { text: 'Five' },
                    { text: 'Six' },
                    { text: 'Seven' },
                    { text: 'Eight' },
                  ]}
                  multiple
                  label='Example label'
                />
              );
            }

Select with label

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

Example label

Show code

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

            export default function App() {
              return (
                <MDBSelect
                  label='Example label'
                  data={[
                    { text: '', value: 1 },
                    { text: 'Two', value: 2 },
                    { text: 'Three', value: 3 },
                    { text: 'Four', value: 4 },
                    { text: 'Five', value: 5 },
                    { text: 'Six', value: 6 },
                    { text: 'Seven', value: 7 },
                    { text: 'Eight', value: 8 },
                  ]}
                />
              );
            }

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

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

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    { text: '' },
                    { text: 'Two' },
                    { text: 'Three' },
                    { text: 'Four' },
                    { text: 'Five' },
                    { text: 'Six' },
                    { text: 'Seven' },
                    { text: 'Eight' },
                  ]}
                  placeholder='Example placeholder'
                />       
              );
            }

Disabled select

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

Show code

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

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    { text: 'One' },
                    { text: 'Two' },
                    { text: 'Three' },
                    { text: 'Four' },
                    { text: 'Five' },
                    { text: 'Six' },
                    { text: 'Seven' },
                    { text: 'Eight' },
                  ]}
                  disabled
                />
              );
            }

Disabled options

Use disabled key on option element to disable specific option.

Show code

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

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    { text: 'One', value: 1 },
                    { text: 'Two', value: 2, disabled: true },
                    { text: 'Three', value: 3, disabled: true },
                    { text: 'Four', value: 4 },
                    { text: 'Five', value: 5 },
                    { text: 'Six', value: 6 },
                    { text: 'Seven', value: 7 },
                    { text: 'Eight', value: 8 },
                  ]}
                />
              );
            }

Clear button

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

Show code

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

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    { text: 'One' },
                    { text: 'Two' },
                    { text: 'Three' },
                    { text: 'Four' },
                    { text: 'Five' },
                    { text: 'Six' },
                    { text: 'Seven' },
                    { text: 'Eight' },
                  ]}
                  clearBtn
                  label='Example label'
                />
              );
            }

Custom content

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

Show code

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

            export default function App() {
              return (
                <MDBSelect data={[
                  { text: 'One' },
                  { text: 'Two' },
                  { text: 'Three' },
                  { text: 'Four', }
                ]}>
                  <MDBBtn size='sm'>Save</MDBBtn>
                </MDBSelect>
              );
            }

Visible options

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

Show code

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

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    { text: 'One' },
                    { text: 'Two' },
                    { text: 'Three' },
                    { text: 'Four' },
                    { text: 'Five' },
                    { text: 'Six' },
                    { text: 'Seven' },
                    { text: 'Eight' },
                  ]}
                  visibleOptions={3}
                />
              );
            }

Secondary text

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

Show code

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

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    { text: 'One', secondaryText: 'Secondary text' },
                    { text: 'Two', secondaryText: 'Secondary text' },
                    { text: 'Three', secondaryText: 'Secondary text' },
                    { text: 'Four', secondaryText: 'Secondary text' },
                  ]}
                />
              );
            }

Search

Set search property to enable options filtering.

Show code

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

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    { text: 'One' },
                    { text: 'Two' },
                    { text: 'Three' },
                    { text: 'Four' },
                    { text: 'Five' },
                    { text: 'Six' },
                    { text: 'Seven' },
                    { text: 'Eight' },
                  ]}
                  search
                />
              );
            }

Select with search inside a modal

Show code

        
            
            import React, { useState } from 'react';
            import {
              MDBBtn,
              MDBSelect,
              MDBModal,
              MDBModalDialog,
              MDBModalContent,
              MDBModalHeader,
              MDBModalTitle,
              MDBModalBody,
              MDBModalFooter,
            } from "mdb-react-ui-kit";

            export default function App() {
              const [basicModal, setBasicModal] = useState(false);

              const toggleShow = () => setBasicModal(!basicModal);

              return (
                <>
                  <MDBBtn onClick={toggleShow}>LAUNCH DEMO MODAL</MDBBtn>
                  <MDBModal show={basicModal} setShow={setBasicModal} tabIndex="-1">
                    <MDBModalDialog>
                      <MDBModalContent>
                        <MDBModalHeader>
                          <MDBModalTitle>Modal title</MDBModalTitle>
                          <MDBBtn
                            className="btn-close"
                            color="none"
                            onClick={toggleShow}
                          ></MDBBtn>
                        </MDBModalHeader>
                        <MDBModalBody>
                          {basicModal && (
                            <MDBSelect
                              search
                              data={[
                                { text: "One", value: 1 },
                                { text: "Two", value: 2 },
                                { text: "Three", value: 3 },
                                { text: "Four", value: 4 },
                                { text: "Five", value: 5 },
                                { text: "Six", value: 6 },
                                { text: "Seven", value: 7 },
                                { text: "Eight", value: 8 },
                                { text: "Nine", value: 9 },
                                { text: "Ten", value: 10 },
                              ]}
                            />
                          )}
                        </MDBModalBody>
        
                        <MDBModalFooter>
                          <MDBBtn color="secondary" onClick={toggleShow}>
                            Close
                          </MDBBtn>
                          <MDBBtn>Save changes</MDBBtn>
                        </MDBModalFooter>
                      </MDBModalContent>
                    </MDBModalDialog>
                  </MDBModal>
                </>
              );
            }

Select with icons

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

Show code

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

            export default function App() {
              return (
                <MDBSelect
                  data={[
                    {
                      text: 'One',
                      icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp',
                    },
                    {
                      text: 'Two',
                      icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp',
                    },
                    {
                      text: 'Three',
                      icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-3.webp',
                    },
                    {
                      text: 'Four',
                      icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-4.webp',
                    },
                    {
                      text: 'Five',
                      icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-5.webp',
                    },
                  ]}
                />
              );
            }

Validation

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

Show code

        
            
            import React from 'react';
            import { MDBSelect, MDBValidation, MDBBtn } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBValidation noValidate>
                  <MDBSelect
                    data={[
                      { text: 'One', value: 1 },
                      { text: 'Two', value: 2 },
                      { text: 'Three', value: 3 },
                      { text: 'Four', value: 4 },
                      { text: 'Five', value: 5 },
                      { text: 'Six', value: 6 },
                      { text: 'Seven', value: 7 },
                      { text: 'Eight', value: 8 },
                    ]}
                    clearBtn
                    validation
                    validFeedback='This value is valid'
                    invalidFeedback='This value is invalid'
                  />
                  <MDBBtn size='sm' className='mt-3' type='submit'>
                    Submit
                  </MDBBtn>
                </MDBValidation>
              );
            }

Set value

Use useState hook to programatically set the component selections.

Single selection

Show code

        
            
              import React, { useState, useEffect } from 'react';
              import { MDBSelect } from 'mdb-react-ui-kit';

              export default function App() {
                const [selectValue, setSelectValue] = useState([
                  { text: "One", value: 1 },
                  { text: "Two", value: 2 },
                  { text: "Three", value: 3 },
                  { text: "Four", value: 4 },
                  { text: "Five", value: 5 },
                  { text: "Six", value: 6 },
                  { text: "Seven", value: 7 },
                  { text: "Eight", value: 8 },
                  { text: "Nine", value: 9 },
                  { text: "Ten", value: 10 },
                ]);

                useEffect(() => {
                  setSelectValue([
                    { text: "One", value: 1 },
                    { text: "Two", value: 2 },
                    { text: "Three", value: 3 },
                    { text: "Four", value: 4, defaultSelected: true },
                    { text: "Five", value: 5 },
                    { text: "Six", value: 6 },
                    { text: "Seven", value: 7 },
                    { text: "Eight", value: 8 },
                    { text: "Nine", value: 9 },
                    { text: "Ten", value: 10 },
                  ]);
                }, []);

                return (
                  <MDBSelect data={selectValue} />
                );
              }

Multi selection

Show code

        
            
              import React, { useState, useEffect } from 'react';
              import { MDBSelect } from 'mdb-react-ui-kit';

              export default function App() {
                const [multiSelectValue, setMultiSelectValue] = useState([
                  { text: "One", value: 1 },
                  { text: "Two", value: 2 },
                  { text: "Three", value: 3 },
                  { text: "Four", value: 4 },
                  { text: "Five", value: 5 },
                  { text: "Six", value: 6 },
                  { text: "Seven", value: 7 },
                  { text: "Eight", value: 8 },
                  { text: "Nine", value: 9 },
                  { text: "Ten", value: 10 },
                ]);

                useEffect(() => {
                  setMultiSelectValue([
                    { text: "One", value: 1 },
                    { text: "Two", value: 2 },
                    { text: "Three", value: 3, defaultSelected: true },
                    { text: "Four", value: 4, defaultSelected: true },
                    { text: "Five", value: 5, defaultSelected: true },
                    { text: "Six", value: 6 },
                    { text: "Seven", value: 7 },
                    { text: "Eight", value: 8 },
                    { text: "Nine", value: 9 },
                    { text: "Ten", value: 10 },
                  ]);
                }, []);

                return (
                  <MDBSelect multiple data={multiSelectValue} />
                );
              }

Auto select

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

Show code

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

            export default function App() {
              return (
                <MDBSelect
                  autoSelect
                  data={[
                    { text: "One", value: 1 },
                    { text: "Two", value: 2 },
                    { text: "Three", value: 3 },
                    { text: "Four", value: 4 },
                    { text: "Five", value: 5 },
                    { text: "Six", value: 6 },
                    { text: "Seven", value: 7 },
                    { text: "Eight", value: 8 },
                    { text: "Nine", value: 9 },
                    { text: "Ten", value: 10 },
                  ]}
                />
              );
            }

Select - API

Import

Show code

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

Properties

MDBSelect

Name	Type	Default	Description	Example
`autoSelect`	boolean	`false`	Enables auto selecting on Tab press	`<MDBSelect autoSelect />`
`clearBtn`	boolean	`false`	Add clear btn to `MDBSelect`	`<MDBSelect clearBtn />`
`contrast`	boolean	`false`	Adjust input colors for dark backgrounds	`<MDBSelect contrast />`
`data`	SelectData[]	`{}`	Add data to `MDBSelect`	`<MDBSelect data={[ { text: 'One', value: 1 } ]} />`
`disabled`	boolean	`false`	Add disabled to `MDBSelect` input	`<MDBSelect placeholder="test" />`
`displayedLabels`	number	`5`	The maximum number of comma-separated list of options displayed on the Multiselect. If a user selects more options than that value, the X options selected text will be displayed instead	`<MDBSelect displayedLabels={3} />`
`inputClassName`	string	`''`	Add class to `MDBSelect` input element	`<MDBSelect inputClassName='test' />`
`invalidFeedback`	string	`''`	Invalid feedback for `MDBSelect`	`<MDBSelect invalidFeedback='test' />`
`label`	string	`''`	Add label to select	`<MDBSelect label='test' />`
`noResultsText`	string	`'No results'`	Change text in option search if there is no records in search value.	`<MDBSelect noResultLabel="test" />`
`optionHeight`	number	`38`	Defines a height of the options (in px)	`<MDBSelect visibleOptions="3" />`
`optionsSelectedLabel`	string	`'options selected'`	The text which is displayed on the Multiselect when there are more than 5 (default) options selected, e.g. 7 options selected	`<MDBSelect optionsSelectedLabel='options checked' />`
`placeholder`	string	`''`	Add placeholder to `MDBSelect`	`<MDBSelect placeholder="test" />`
`preventFirstSelection`	boolean	`false`	Prevents selecting first option by default	`<MDBSelect preventFirstSelected />`
`search`	boolean	`false`	Add search to `MDBSelect` input in dropdown	`<MDBSelect search />`
`searchLabel`	string	`'Example Label'`	Change label of input	`<MDBSelect searchLabel="test" />`
`selectAll`	boolean	`true`	Displays select all option in multiselect dropdown	`<MDBSelect selectAll={false} />`
`selectAllLabel`	string	`'Select all'`	Change label to select all option in multiselect	`<MDBSelect selectAllLabel="test" />`
`size`	'default' \| 'lg' \| 'sm'	`'default'`	Size of the `MDBSelect`	`<MDBSelect size='lg' />`
`multiple`	boolean	`false`	Change select to multiselect	`<MDBSelect multiple />`
`validation`	boolean	`false`	Enables validation for the MDBSelect	`<MDBSelect validation />`
`validFeedback`	string	`''`	Valid feedback for `MDBSelect`	`<MDBSelect validFeedback='test' />`
`visibleOptions`	string \| number	`'5'`	Change visible options in `MDBSelect`	`<MDBSelect visibleOptions="3" />`

Advanced types

SelectData

Show code

        
                  
              type SelectData = {
                disabled?: boolean;
                text?: string;
                defaultSelected?: boolean;
                secondaryText?: React.ReactNode;
                value?: string | number;
                icon?: string;
                active?: boolean;              
              };

Methods

Name	Type	Default	Description	Example
`onValueChange`	(data: SelectData[] \| SelectData) => void	`-`	This method returns a selected item in the `MDBSelect` or an array of items in multiple	`<MDBSelect onValueChange={(e) => console.log(e)} data{...} />`
`onOpen`	() => void	`-`	This event fires immediately when the select is opened.	`<MDBSelect onOpen={() => console.log('opened')} />`
`onClose`	() => void	`-`	This event fires immediately when the select is closed.	`<MDBSelect onClose={() => console.log('closed')} />`

Select

React Bootstrap 5 Select

Basic example

Multiselect

Select with label

Select with placeholder

Disabled select

Disabled options

Clear button

Custom content

Visible options

Secondary text

Search

Select with search inside a modal

Select with icons

Validation

Set value

Single selection

Multi selection

Auto select

Related resources

Select - API

Import

Properties

MDBSelect

Advanced types

SelectData

Methods