Multiselect

React Bootstrap Multiselect - free examples, templates & tutorial

Responsive React Multiselect built with Bootstrap 5. Examples of multiselect dropdown with checkbox, listbox, search, buttons, groups, icons, validation, disabled

Unlike a standard Select, multiselect allows the user to select multiple options at once.

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

Basic example

Add multiple attribute to the select element to activate multiple mode.

Note: This component requires MDBootstrap Pro package. 

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

Multiselect with icons

Add icon data attribute 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
      multiple
      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 } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBValidation>
      <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>
  );
}