Select Dropdown

React Bootstrap Select Dropdown - free examples & tutorial

Responsive React Select Dropdown built with Bootstrap 5. Examples include multiselect dropdown, select dropdown with search box, checkbox form select dropdown & more.

Note: To learn more about Select component and see all available options, methods, events and advanced usage - read Select Docs & API section

Basic dropdown with Select

Make sure to read the main Select docs to learn how to use this component in production.

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

Basic dropdown with MultiSelect

Add multiple property to the select element to allow selecting more than one value.

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 Dropdown 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 Dropdown 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 Dropdown

Make the select dropdown unclickable by adding the disabled property.

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. In this example we've added a button. 

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

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

This value is valid
This value is invalid
✕
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>
  );
}