Simple and lightweight multiple selection dropdown component with checkboxes
, search
and select-all
npm i react-multi-select-component # npm
yarn add react-multi-select-component # yarn
import React, { useState } from "react";
import { MultiSelect } from "react-multi-select-component";
const options = [
{ label: "Grapes 🍇", value: "grapes" },
{ label: "Mango 🥭", value: "mango" },
{ label: "Strawberry 🍓", value: "strawberry", disabled: true },
];
const Example = () => {
const [selected, setSelected] = useState([]);
return (
<div>
<h1>Select Fruits</h1>
<pre>{JSON.stringify(selected)}</pre>
<MultiSelect
options={options}
value={selected}
onChange={setSelected}
labelledBy="Select"
/>
</div>
);
};
export default Example;
More examples can be found here ↗
Prop | Description | Type | Default |
---|---|---|---|
labelledBy |
value for aria-labelledby |
string |
|
options |
options for dropdown | [{label, value, disabled}] |
|
value |
pre-selected rows | [{label, value}] |
[] |
hasSelectAll |
toggle 'Select All' option | boolean |
true |
isLoading |
show spinner on select | boolean |
false |
shouldToggleOnHover |
toggle dropdown on hover option | boolean |
false |
overrideStrings |
localization ↗ | object |
|
onChange |
onChange callback | function |
|
disabled |
disable dropdown | boolean |
false |
disableSearch |
hide search textbox | boolean |
false |
filterOptions |
custom filter options (async supported) ↗ | function |
Fuzzy Search |
className |
class name for parent component | string |
multi-select |
valueRenderer |
custom dropdown header ↗ | function |
|
ItemRenderer |
custom dropdown option ↗ | function |
|
ClearIcon |
Custom Clear Icon for Search | ReactNode |
|
ArrowRenderer |
Custom Arrow Icon for Dropdown | ReactNode |
|
debounceDuration |
debounce duration for Search | number |
300 |
ClearSelectedIcon |
Custom Clear Icon for Selected Items (Hint: Pass null to prevent it from rendering completely) |
ReactNode |
|
isCreatable |
Allows user to create unavailable option(s) example ↗ | boolean |
false |
onCreateOption |
allows to override newly created option example ↗ | function |
|
closeOnChangedValue |
automatically closes dropdown when its value is changed | boolean |
false |
For every release changelog/migration-guide will be available in releases
MIT © harshzalavadiya