Creating Multi-select Dropdown with Checkbox in React
Recently, while working on a project, I had to create a dropdown with filters where multiple filters could be selected at once. I started browsing the internet on the best way to do it and came across multiple approaches.
In this story, I will walk you through one of the most concise ways of creating a multi-select dropdown with check box items in React. There are ways to do it without using any additional packages but in my opinion, using the react-select npm package is quite convenient. Moreover, the library offers numerous customizations which might be useful for custom use-cases.
Step 1: Add react-select NPM package
Add react-select
NPM package to your project.
npm i react-select
If you are using yarn
then do a yarn add
instead.
Step 2: Add Custom Dropdown Option
The default Option
in react-select doesn’t contain a checkbox so we need to create a custom component. Use the following code snippet to create a custom component for the dropdown.