Installation
Usage
"use client"
import { useState } from "react"
import { MultiSelect } from "@/components/multi-select"
export function Assignees() {
const [value, setValue] = useState<string[]>([])
return (
<MultiSelect
label="Assignees"
value={value}
onValueChange={setValue}
options={[
{ value: "ada", label: "Ada Lovelace", description: "Engineering" },
{ value: "grace", label: "Grace Hopper", description: "Research" },
]}
/>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | { value; label; description?; disabled? }[] | — | The choices; each may have description, icon and disabled. |
| value / defaultValue | string[] | — / [] | Controlled or uncontrolled selection. |
| onValueChange | (value: string[]) => void | — | Called with the new selection. |
| label | string | — | Accessible name, e.g. "Assignees". |
| placeholder | string | "Search…" | Shown while nothing is chosen. |
| maxSelected | number | Infinity | Stop adding once this many are chosen. |
| emptyMessage | ReactNode | "No matches." | Shown when the search matches nothing. |
| name | string | — | Submit with forms: one hidden input per value. |
| creatable | boolean | false | Offer “Create …” when nothing matches exactly, e.g. for tags. |
| onCreateOption | (option) => void | — | Called with a newly created option; it is also selected. |
| disabled | boolean | false | Disable the whole field. |
Accessibility
- WAI-ARIA combobox with a multi-selectable listbox; the active option is announced via aria-activedescendant.
- ↓/↑ open and move, Enter toggles, Escape closes, Backspace in an empty field removes the last chip.
- Each chip has a "Remove …" button; every add and remove is announced.
- Reaching the limit is announced and further options are disabled.
- “Clear all” is a named button; clearing and creating are announced.
Changelog
- v1.0.0Latest
First release.