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.

        
            
            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, selected: true },
                    { 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', selected: true, disabled: true },
                    { text: 'Three', selected: true },
                    { text: 'Four' },
                    { text: 'Five' },
                    { text: 'Six' },
                    { text: 'Seven' },
                    { text: 'Eight', selected: true },
                  ]}
                  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: 'One', value: 1 },
                    { text: 'Two', value: 2 },
                    { text: 'Three', value: 3, selected: true },
                    { 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: 'One' },
                    { 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', selected: true },
                    { 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, selected: true },
                    { text: 'Two', value: 'not', disabled: true },
                    { text: 'Three', value: 'not', 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', selected: true }]}>
                  <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', selected: true },
                    { text: 'Seven' },
                    { text: 'Eight' },
                  ]}
                  visibleOptions='3'
                />
              );
            }
          
        
    

Secondary text

Add secondary-text 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', selected: true },
                    { text: 'Three', secondaryText: 'Secondary text' },
                    { text: 'Four', secondaryText: 'Secondary text' },
                  ]}
                />
              );
            }
          
        
    


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: {
                        src: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp',
                        className: 'rounded-circle',
                      },
                      selected: true,
                    },
                    {
                      text: 'Two',
                      icon: {
                        src: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp',
                        className: 'rounded-circle',
                      },
                    },
                    {
                      text: 'Three',
                      icon: {
                        src: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-3.webp',
                        className: 'rounded-circle',
                      },
                    },
                    {
                      text: 'Four',
                      icon: {
                        src: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-4.webp',
                        className: 'rounded-circle',
                      },
                    },
                    {
                      text: 'Five',
                      icon: {
                        src: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-5.webp',
                        className: 'rounded-circle',
                      },
                    },
                  ]}
                />
              );
            }
          
        
    

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, selected: true },
                      { 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>
              );
            }
          
        
    

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
getValue Function ()=>{} This method returns a selected item in the MDBSelect <MDBSelect getValue={(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" />