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