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 />
disabled boolean false Add disabled to MDBSelect input <MDBSelect placeholder="test" />
data SelectData[] {} Add data to MDBSelect <MDBSelect data={} />
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' />
multiple boolean false Change select to multiselect <MDBSelect multiple />
noResultLabel string 'No results' Change label in option search if there is no records in search value. <MDBSelect noResultLabel="test" />
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" />
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' />
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" />
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;
                className?: string;
                text: string;
                height?: string | number;
                selected?: boolean;
                secondaryText?: React.ReactNode;
                value?: string | number;
                style?: React.CSSProperties;
                revert?: boolean;
                icon?: SelectIcon | React.ComponentProps<any>;
                active?: boolean;
              };

SelectIcon

        
                  
              interface SelectIcon {
                src?: string;
                className?: string;
                text?: string;
              }

Methods

Name Type Default Description Example
getValue (e: SelectData) => void - This method returns a selected item in the MDBSelect <MDBSelect getValue={(e)=>console.log(e)} className="class" />
getData (e: SelectData[]) => void - This method return data if something change in prop data in MDBSelect <MDBSelect getData={(e)=>console.log(e)} className="class" />