Select Deprecated

React Bootstrap 5 Select

React Select fields components are used for collecting user provided information from a list of options.

Warning: This documentation is for an older version of the MDBSelect component, which has moved to the MDBSelectDeprecated one. We recommend using the latest one you can find here.

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 { MDBSelectDeprecated } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelectDeprecated
                  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 { MDBSelectDeprecated } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelectDeprecated
                  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 { MDBSelectDeprecated } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelectDeprecated
                  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 { MDBSelectDeprecated } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelectDeprecated
                  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 { MDBSelectDeprecated } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelectDeprecated
                  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 { MDBSelectDeprecated } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelectDeprecated
                  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 { MDBSelectDeprecated } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelectDeprecated
                  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 { MDBSelectDeprecated, MDBBtn } from 'mdb-react-ui-kit';

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

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 { MDBSelectDeprecated } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelectDeprecated
                  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 { MDBSelectDeprecated } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelectDeprecated
                  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 { MDBSelectDeprecated } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBSelectDeprecated
                  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 { MDBSelectDeprecated, MDBValidation, MDBBtn } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <MDBValidation noValidate>
                  <MDBSelectDeprecated
                    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 Deprecated - API

Import

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

Properties

MDBSelectDeprecated

Name Type Default Description Example
clearBtn boolean false Add clear btn to MDBSelectDeprecated <MDBSelectDeprecated clearBtn />
disabled boolean false Add disabled to MDBSelectDeprecated input <MDBSelectDeprecated placeholder="test" />
data SelectData[] {} Add data to MDBSelectDeprecated <MDBSelectDeprecated data={} />
inputClassName string '' Add class to MDBSelectDeprecated input element <MDBSelectDeprecated inputClassName='test' />
invalidFeedback string '' Invalid feedback for MDBSelectDeprecated <MDBSelectDeprecated invalidFeedback='test' />
label string '' Add label to select <MDBSelectDeprecated label='test' />
multiple boolean false Change select to multiselect <MDBSelectDeprecated multiple />
noResultLabel string 'No results' Change label in option search if there is no records in search value. <MDBSelectDeprecated noResultLabel="test" />
placeholder string '' Add placeholder to MDBSelectDeprecated <MDBSelectDeprecated placeholder="test" />
search boolean false Add search to MDBSelectDeprecated input in dropdown <MDBSelectDeprecated search />
searchLabel string 'Example Label' Change label of input <MDBSelectDeprecated searchLabel="test" />
selectAllLabel string 'Select all' Change label to select all option in multiselect <MDBSelectDeprecated selectAllLabel="test" />
size 'default' | 'lg' | 'sm' 'default' Size of the MDBSelectDeprecated <MDBSelectDeprecated size='lg' />
tag string 'div' Tag to select input wrapper in MDBSelectDeprecated <MDBSelectDeprecated tag="span" />
tagWrapper string 'div' Tag to select dropdown wrapper MDBSelectDeprecated <MDBSelectDeprecated tag="span" />
validation boolean false Enables validation for the MDBSelectDeprecated <MDBSelectDeprecated validation />
validFeedback string '' Valid feedback for MDBSelectDeprecated <MDBSelectDeprecated validFeedback='test' />
visibleOptions string | Number '5' Change visible options in MDBSelectDeprecated <MDBSelectDeprecated 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 MDBSelectDeprecated <MDBSelectDeprecated getValue={(e)=>console.log(e)} className="class" />
getData (e: SelectData[]) => void - This method return data if something change in prop data in MDBSelectDeprecated <MDBSelectDeprecated getData={(e)=>console.log(e)} className="class" />