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.

One
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.

One
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.

One
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.

One
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.

✕
One
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.

One
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.

One
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.

One
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.

One
One
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.

This value is valid
This value is invalid
✕
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" />