Multi-Select Dropdown In React-JS Using Prime-React

Hello developers, In this blog, we are going to learn how we can use multi-select dropdown in react using prime react

This component comes with lots of functionality and customizations

First, create a new app using this command:

npx create-react-app multi-select-dropdown

Now install these packages in your app:

npm i primereact
npm i primeflex
npm i primeicons

Add this code in your component for basic multi-select-dropdown:

import 'primeicons/primeicons.css';
import 'primereact/resources/themes/lara-light-indigo/theme.css';
import 'primereact/resources/primereact.css';
import 'primeflex/primeflex.css';
import React, { useState } from 'react';
import { MultiSelect } from 'primereact/multiselect';

const MultiSelection= () => {
  const stateSelectItems = [
    { label: 'Gujarat', value: 'GJ' },
    { label: 'Delhi', value: 'DL' },
    { label: 'Punjab', value: 'PB' }
  ];
  const [state, setState] = useState('')

  return (
    <div className="card flex justify-content-center">
      <MultiSelect value={state} options={stateSelectItems} placeholder='Select state...' display='chip' onChange={(e) => setState(e.value)}/>
    </div>
  )
}

export default MultiSelection

Demo: (Basic)

You can add grouped options also:

Options groups are specified with the optionGroupLabel and optionGroupChildren properties.

const groupedCities = [
  {
      label: 'Germany', code: 'DE',
      items: [
          { label: 'Berlin', value: 'Berlin' },
          { label: 'Frankfurt', value: 'Frankfurt' },
          { label: 'Hamburg', value: 'Hamburg' },
          { label: 'Munich', value: 'Munich' }
      ]
  },
  {
      label: 'USA', code: 'US',
      items: [
          { label: 'Chicago', value: 'Chicago' },
          { label: 'Los Angeles', value: 'Los Angeles' },
          { label: 'New York', value: 'New York' },
          { label: 'San Francisco', value: 'San Francisco' }
      ]
  },
  {
      label: 'Japan', code: 'JP',
      items: [
          { label: 'Kyoto', value: 'Kyoto' },
          { label: 'Osaka', value: 'Osaka' },
          { label: 'Tokyo', value: 'Tokyo' },
          { label: 'Yokohama', value: 'Yokohama' }
      ]
  }
];

<MultiSelect value={city}  options={groupedCities} display='chip' placeholder='Select city....'optionGroupLabel='label' optionGroupChildren='items' onChange={(e) => setCity(e.value)}/>

Demo: (Grouped options)