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. 

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