SelectMenu
Markdown for agentsCustom listbox select for rich options: descriptions, icons, groups, multi-select, custom rows and hidden inputs for forms.
npx slipstream-ui@latest add select-menuRich single select (interactive)
Plan
selected: pro
Multi-select with form inputs (interactive)
Alert channels
values: [email]
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SelectMenuItem[] | required | Options: { value, label, description?, icon?, disabled?, group? }. |
| value / defaultValue | string | string[] | — | Controlled or initial selection; string[] when multiple. |
| onValueChange | (value: string | string[]) => void | — | Fired with the new selection. |
| multiple | boolean | false | Allow several selections; the listbox stays open. |
| placeholder | string | 'Select…' | Shown when nothing is selected. |
| name | string | — | Renders hidden inputs so the selection submits with a form. |
| renderValue / renderItem | function | — | Custom trigger content and option rows. |
Accessibility
- Button + listbox pattern: aria-haspopup, aria-expanded, aria-activedescendant, aria-selected.
- Arrows move, Home/End jump, Enter/Space select, Escape closes; first-letter typeahead.
- Disabled options expose aria-disabled and are skipped by keyboard movement.
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.