React developers use <select> elements to let users choose one of multiple options and collect their input.
You can, however, customize the <select> element to let users choose multiple options.
In this article, we will explore how to implement multi-select dropdown in React. First, we’ll try to implement this without using libraries. Then we will explore two libraries to easily implement multi select feature in React.
Specific Examples
multi-select feature using react hooks
Add a Boolean attribute ‘multiple’ to <select> element to implement multi-select dropdown in React.
<select value={selectedOption} multiple >
<option>…</option>
</select>In case you didn’t know, Boolean attributes don’t need a value. Simply the presence of the multiple attribute tells browsers to let users choose multiple options.
Let’s look at this code example where we have a controlled <select> input with multi-select feature:
Here are 5 steps to create a multi-select dropdown feature in React:
1. Add the multiple Boolean attribute to <select> element in React.
2. Create a state variable to store selected options
3. Set <select> element’s value to the state value. This will create a controlled input.
4. Create a handleChange function that accesses selected options at event.target.selectedOption. Update the state to selected values.
5. Set onChange to handle the event.
There are many limitations to custom built dropdowns in React.
For example – users have to hold down CTRL key to select multiple options. You can create a custom multi select dropdown in React, but you will spend a lot of time on visual and functional customization.
There are many libraries that provide ready-to-use components with multi select feature in React.
Libraries to implement multi select dropdown
React has a large community of developers who write and share code, so you don’t have to build multi select dropdown components from scratch.
react-select
react-select is a library that provides a custom Select component with many built-in features. Select is a custom component, not to be confused with standard <select> element in React.
You use attributes and props to implement advanced features. Most important are:
- options – set to an array of objects, where each object corresponds to <option> element in HTML. Each array item (an object) has two properties – label and value, which correspond to label and value of each option. react-select automatically generates options for every object in the array.
- isMulti – adding this Boolean attribute allows users to select multiple attributes.
- isSearchable – another Boolean attribute that allows users to search options. Useful if you have a dropdown element with many options.
Let’s imagine you are running a bakery, and you want to let users mix multiple flavors when ordering a cake.
Here’s a live demo and code example of how to implement multi select feature in React:
Users can remove selected options by clicking the X button on the option itself, or remove all selected options by clicking X on the input field. Selecting an option automatically removes it from the dropdown, which is also a nice feature.
We also added a isSearchable prop, so users can search options to select them.
react-multi-select-component
React developers can also use this lightweight utility to implement multi-select feature in React.
Once installed, you can import MultiSelect custom component from react-multi-select-component.
Like react-select, we set options prop to an array of objects, where every object represents an option and has two properties – label and value.
In this case, however, multi-select is enabled by default. You don’t need to add any attributes like before.
In the live demo, note that react-multi-select-component has a number of useful features that react-select doesn’t have:
- It allows users to select all options
- Every option in the dropdown has a checkbox, so users can easily select/deselect them
It’s also searchable by default, so developers don’t need to put effort into implementing this feature.
