How to Create a Multi-Select Input Field with React-Select

Introduction

React-Select is a flexible and highly customizable React component for creating select inputs. It provides a wide range of features, including multi-select functionality, making it an ideal choice for implementing complex selection interfaces in your React applications.

Installation

npm install react-select

Creating a Multi-Select Input Field

Import React-Select into your component file:

import Select from 'react-select';

Define an array of options that will populate your multi-select input field:

The value property represents the underlying value of the option, while the label property is the text that will be displayed to the user in the dropdown menu and the selected values.

const options = [
 { value: 'apple', label: 'Apple' },
 { value: 'banana', label: 'Banana' },
 { value: 'orange', label: 'Orange' },
 { value: 'grape', label: 'Grape' },
 { value: 'watermelon', label: 'Watermelon' }
];

Implementing Multi-Select

Use the “isMulti” prop to enable multi-select functionality in the Select component. Also, pass the options array and the handleChange function to handle selected options.

<Select
      isMulti
      options={options}
      onChange={handleChange}
    />