Forms
Multi-select
Pick several options from a known list, with the chosen values shown as removable chips and an overflow count once they no longer fit.
Not documented yet
This component ships in the design system and is fully supported. What is missing is the guidance around it: when to reach for it, the do and don't, and the accessibility notes. Until that is written, Storybook is the reference for variants, props and live controls.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
optionsrequired | MultiSelectOption[] | — | Selectable options. `label` is displayed and searched. |
value | string[] | undefined | — | Currently selected values (controlled). |
onValueChange | ((values: string[]) => void) | undefined | — | — |
loading | boolean | undefined | — | Show a skeleton option list while options load asynchronously. |
maxVisible | number | undefined | 3 | How many selected badges to show on the trigger before collapsing the rest into a "+N" badge. |
placeholder | string | undefined | "Select…" | — |
searchPlaceholder | string | undefined | "Search…" | — |
emptyText | string | undefined | "No results found." | — |
className | string | undefined | — | — |
id | string | undefined | — | — |