Combobox
A select you can type in to filter long lists of options.Basic
Preview
Code
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Combobox, Field } from '@advui/core'
<Field label="Country">
<Combobox options={countries} value={country} onValueChange={setCountry} />
</Field>API reference
Combobox
| Prop | Type | Default | Description |
|---|---|---|---|
options | { value: string; label: string; description?: string; disabled?: boolean }[] | — | The options. |
value | string | null | — | The picked option’s value, when you control it. |
defaultValue | string | null | — | The picked option’s value at first, when the field manages it. |
onValueChange | (value: string | null) => void | — | Called on a pick, and with null when the text is cleared. |
filter | (option, query) => boolean | — | Default: the label contains the text, ignoring case and accents. |
emptyText | string | null | 'No results' | Shown when nothing matches; null hides the list instead. |
placeholder | string | — | Shown while empty. |
title | string | — | Title of the bottom sheet on phones. |
size | 'sm' | 'md' | 'lg' | 'md' | As Input. |
invalid | boolean | false | Error styling and `aria-invalid`, as Input. |
disabled | boolean | false | Not focusable or editable, as Input. |
Accessibility
- On web the text box has
role="combobox"witharia-expanded,aria-controlsandaria-autocomplete="list"; focus stays in it andaria-activedescendantpoints at the highlighted option. - Options have
role="option"andaria-selected; the picked one also shows a check. - On phones the field is a button that opens a bottom sheet with a search box and large, labelled rows.
- On web a click or tap on the field opens the list, as on a select; Tab focus does not, so moving through a form stays quiet. The chevron toggles it.
| Key | Action |
|---|---|
| ArrowDown / ArrowUp | Opens the list, then moves between options. |
| Enter | Picks the highlighted option. |
| Escape | Closes the list and restores the picked label. |
Platform notes
Web
The list renders in a portal and flips above the field when there is no room below.
iOS
Opens a bottom sheet that moves up with the keyboard.
Android
Opens a bottom sheet; the back button closes it.