What is Multi-select?

A multi-select is the many-at-once version of a select. The user opens a list, ticks as many options as apply, and the field shows the result as a summary or a row of chips, each with its own remove control. It covers assigning reviewers, choosing tags, filtering a table by several statuses, or picking the regions a report should include. The native <select multiple> element exists, but it needs Ctrl or Cmd clicking and shows a cramped box, so most products build their own.

When to use it

• Several values from a list of about seven or more. Below that, a checkbox group shows every option at once with no popup.
• Filtering and tagging, where the chosen set is the point and people add and remove items often.
• Known, bounded options. For free text values such as new tags, use a tags input, which accepts anything typed.
• Avoid it for mutually exclusive choices; that is a radio group or a single combobox.

Accessibility

There are two accessible shapes. The first is a listbox: the popup has role="listbox" with aria-multiselectable="true", every item has role="option" and aria-selected, and Space toggles the focused option. The second is a popup of real checkboxes, where each item is a native checkbox or a menuitemcheckbox and the usual checkbox semantics apply. Both work; the listbox version is the natural fit when there is also a text filter.

• The trigger needs an accessible name and aria-expanded, and its summary text must change with the selection so screen reader users hear the new value.
• Chips are buttons named after the item they remove, such as "Remove Maya Chen". A bare × with no name is a common failure.
• Announce the count after a change ("2 selected") through a polite live region rather than reading the whole list.
• Do not close the popup after each pick. People choose several things in a row.

How to build one in React

MiniDev's MultiSelect is a popover list with check marks and removable chips for the chosen items. It takes items, a controlled value array and onChange:

"use client"
import * as React from "react"
import { MultiSelect } from "@/components/ui/multi-select"

const REVIEWERS = [
  { value: "maya", label: "Maya Chen" },
  { value: "theo", label: "Theo Okafor" },
  { value: "priya", label: "Priya Raman" },
]

export function ReviewerField() {
  const [value, setValue] = React.useState<string[]>([])
  return <MultiSelect items={REVIEWERS} value={value} onChange={setValue} placeholder="Add reviewers" />
}

Keep the value as an array of ids, not labels, so renaming an option never breaks saved data. When the list is long, add a search field at the top of the popup and keep selected items pinned at the top so they stay visible after filtering. For single values with the same popup mechanics, see the Combobox in the forms category.