Getting started

Install

npm

npm install react-multiple-select-dropdown-lite

pnpm

pnpm add react-multiple-select-dropdown-lite

yarn

yarn add react-multiple-select-dropdown-lite

React 18 and 19 are supported. The open menu is a popover: it needs the Popover API, in Chrome 114, Firefox 125 and Safari 17. Submenus open beside their title where the browser has CSS anchor positioning, else under it, in the menu.

Use it

Import the component and its stylesheet once, pass options, and read the selection from onChange. It gets the selected values as an array, and their option objects as a second argument.

value: []

Basic.tsx

import { useState } from 'react'
import MultiSelect from 'react-multiple-select-dropdown-lite'
import 'react-multiple-select-dropdown-lite/dist/index.css'

const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Cherry', value: 'cherry' },
  { label: 'Mango', value: 'mango' },
  { label: 'Orange', value: 'orange' }
]

export default function Basic() {
  const [value, setValue] = useState<string[]>([])

  return (
    <>
      <MultiSelect options={options} onChange={setValue} />
      <p className='demo-output'>value: {JSON.stringify(value)}</p>
    </>
  )
}

Each option needs a string label and a unique string value, or any shape with getLabel and getValue. Pre-select with defaultValue, an array of option values. It only sets the initial selection; to change the selection from outside, pass value instead (controlled value).

TypeScript

Types ship with the package:

import MultiSelect from 'react-multiple-select-dropdown-lite'
import type { MultiSelectOption } from 'react-multiple-select-dropdown-lite'

const onChange = (values: string[], options: MultiSelectOption[]) =>
  console.log(values, options)
<MultiSelect options={options} onChange={onChange} />

Also exported: MultiSelectGroup, MultiSelectProps, MultiSelectChipProps, MultiSelectClassNames, MultiSelectListProps and MultiSelectGroupTitleProps.

Next steps

• Examples: single select, groups, creatable values, controlled value and more
• API: every prop and event
• Styling: CSS variables and class names