Search
Markdown for agentsSelect-with-search: type to filter a full-width dropdown of options, or arrow through the full set from an empty query.
npx slipstream-ui@latest add searchInteractive
Type to filter — arrows + Enter work too
Selected value: none yet
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | SearchOption[] | required | The full option set; filtered client-side as the user types. |
| defaultValue | string | — | Initially selected option value (display starts on its label). |
| onValueChange | (value: string) => void | — | Called with the selected option's value. |
| placeholder | string | 'Search…' | Input placeholder while no query is typed. |
| emptyText | string | 'No matching results' | Shown when no option matches the query. |
| disabled | boolean | false | Disables the input and the dropdown. |
Accessibility
- Combobox pattern: aria-expanded/aria-controls/aria-activedescendant on the input.
- Keyboard: ArrowDown opens and moves, Home/End jump, Enter selects, Escape closes.
- Option clicks keep focus in the input — typing continues immediately.
- The listbox portals with fixed positioning, so scrollable parents never clip it.
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.
- Fixed-position portalled listbox requires JavaScript; supported in every tested browser.