Implement Multi Select Box in ReactJS
Jun 5, 2021
First, we need to install multiselect-react-dropdown package.
It has the multi select functionality with various features like selection limit, CSS customization, checkbox, search option, disable preselected values, flat array, keyboard navigation for accessibility and grouping features. Also it has feature to behave like normal dropdown(means single select dropdown).
import React,{useState} from 'react';
import {Multiselect} from 'multiselect-react-dropdown'
import './App.css';
function App() { const data = [
{id:1,fruit:"banana"},
{id:2,fruit:"pineapple"},
{id:3,fruit:"mango"},
{id:4,fruit:"apple"}
]const [options] = useState(data);return ( <div style={{width:"80%",justifyContent:"center",display:"flex"}}> <div className="App"> <h3>Multi Select Box</h3> <Multiselect options={options} displayValue="fruit" /> </div> </div>);}export default App;