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.