Autocomplete
A text field with suggestions; any text is a valid value.Basic
Preview
Code
Pick a suggestion or type any city.
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Autocomplete, Field } from '@advui/core'
<Field label="City">
<Autocomplete options={suggestions} value={city} onValueChange={setCity} />
</Field>API reference
Autocomplete
Takes Combobox’s `options`, `filter`, `placeholder`, `size` and states.| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The text, when you control it. |
defaultValue | string | — | The text at first, when the field manages it. |
onValueChange | (value: string) => void | — | Called as the text changes and when a suggestion is picked. |
options | ComboboxOption[] | — | Suggestions. Pass new ones as the text changes to load them. |
emptyText | string | null | null | By default the list hides when nothing matches. |
Accessibility
- The same combobox pattern as Combobox; picking a suggestion fills the text, and Escape closes the list without changing it.
- A click or tap on the field shows the suggestions that match its text; Tab focus does not.
| Key | Action |
|---|---|
| ArrowDown / ArrowUp | Moves through the suggestions. |
| Enter | Fills in the highlighted suggestion. |
| Escape | Closes the suggestions. |
Platform notes
iOS
Opens a bottom sheet where the text is typed, with the suggestions under it.
Android
Opens a bottom sheet; the back button closes it and keeps the text.