Multi Select
Pick several options from a searchable list; picks show as chips.Basic
Preview
Code
Bug
Accessibility
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Field, MultiSelect } from '@advui/core'
<Field label="Labels">
<MultiSelect options={labels} value={picked} onValueChange={setPicked} />
</Field>API reference
MultiSelect
Takes Combobox’s `options`, `filter`, `placeholder`, `title`, `size` and states.| Prop | Type | Default | Description |
|---|---|---|---|
value | string[] | — | Picked values, in order. |
defaultValue | string[] | — | Starting `value` when uncontrolled. |
onValueChange | (value: string[]) => void | — | Called when an option is picked, unpicked or removed. |
removeLabel | (label: string) => string | (label) => `Remove ${label}` | Accessible name of each chip’s remove button (web). |
Accessibility
- On web the listbox has
aria-multiselectable, stays open while you pick, and each option’saria-selectedsays whether it is picked. - Chips have named remove buttons; Backspace in the empty text box removes the last one. Removing a chip does not open the list.
- On web a click or tap on the field opens the list; Tab focus does not.
- On phones the sheet shows checkbox rows, and the field announces how many are selected.
| Key | Action |
|---|---|
| ArrowDown / ArrowUp | Moves between options. |
| Enter | Picks or unpicks the highlighted option. |
| Backspace | Removes the last chip when the text box is empty. |
| Escape | Closes the list. |
Platform notes
iOS
Opens a bottom sheet of checkbox rows; unpick there to remove a chip.
Android
Opens a bottom sheet of checkbox rows; the back button closes it.