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.

        
            
            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.

        
            
            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.

        
            
            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.

        
            
            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.

        
            
            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.

        
            
            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.

        
            
            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.

        
            
            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.

        
            
            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.

        
            
            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' },
                  ]}
                />
              );
            }
          
        
    


Select with search inside a modal

        
            
            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.

        
            
            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.

        
            
            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

        
            
              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

        
            
              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.

        
            
            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

        
            
            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' />
noResultsLabel string 'No results' Change label 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" />
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

        
                  
              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')} />