MultiSelect
Searchable multi-value select with popover listbox
Category: inputs · WCAG 2.2-AA · form, select, multi, input, popover
States
- closed
- open
Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | MultiSelectOption[] | — | The selectable options. |
value | string[] | — | The controlled value. |
onValueChange | (v: string[]) => void | — | Called with the new value when it changes. |
placeholder | string | — | Placeholder text shown when the field is empty. |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
labels | MultiSelectLabels | — | Overrides for the component’s user-visible strings (i18n). |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-color-accent--cascivo-radius-input--cascivo-radius-md--cascivo-shadow-md--cascivo-focus-ring--cascivo-motion-enter
When to use
- Selecting several values at once from a known list of options
- Lists long enough that the built-in search/filter helps the user find options
- Cases needing a compact trigger that summarizes the selected count
When not to use
- Choosing exactly one value — use Select
- Allowing free-text entries not in a predefined list — use Combobox or TagsInput
- A handful of always-visible options — use a Checkbox group
How to build an accessible MultiSelect in React →
Examples
Basic
<MultiSelect options={[{label:'One',value:'1'},{label:'Two',value:'2'}]} value={[]} onValueChange={() => {}} />