Autocomplete
Markdown for agentsType-ahead input following the HTML autocomplete model: any value is allowed while matching suggestions appear in a keyboard-navigable listbox.
npx slipstream-ui@latest add autocompleteControlled
Type anything — free text is valid
Current value: empty
Tags (uncontrolled)
Suggestions help, custom tags are fine
Current value: streaming
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| suggestions | string[] | required | Suggestion labels offered while typing; free-form values stay allowed. |
| value | string | — | Current text — standard controlled-input contract (wire onValueChange). |
| defaultValue | string | '' | Initial text when uncontrolled. |
| onValueChange | (value: string) => void | — | Fires on every keystroke AND on suggestion selection. |
| emptyText | string | 'No suggestions' | Shown when no suggestion matches. |
| autoComplete | string | — | Native autofill hint — passes through to the input alongside the custom list. |
Accessibility
- Combobox pattern with aria-activedescendant; suggestions are role=option with aria-selected.
- Arrow keys highlight, Enter accepts the highlighted suggestion, Escape closes; unhighlighted Enter submits the form natively.
- Native autoComplete attribute passthrough keeps browser autofill working.
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 suggestion list requires JavaScript; supported in every tested browser.