MultiSelect
Markdown for agentsSearchable multi-select filter with visible removable chips and a checkbox panel.
npx @slipstream-ui/cli@latest add multi-selectIndustry filter
Industry
Technology
Selected: technology
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | MultiSelectOption[] | required | Options: value, label, optional description, group and disabled. |
| value | string[] | — | Controlled selected values. |
| defaultValue | string[] | — | Initial selected values when uncontrolled. |
| onValueChange | (values: string[]) => void | — | Fires with the full selection. |
| label | string | — | Visible field label; also names the trigger. |
| triggerLabel | string | 'Add' | Trigger text when nothing is selected. |
| searchPlaceholder | string | 'Search options' | Search placeholder and accessible name. |
| emptyText | string | 'No options' | Shown when no option matches. |
| maxDisplay | number | 3 | Maximum chips before a +N more summary. |
| disabled | boolean | — | Disable the trigger and chip removal. |
Accessibility
- The trigger is named by the visible label and exposes aria-haspopup/aria-expanded.
- Options are native checkboxes with wrapping labels; each chip has a named remove button.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.