Combobox
A text field with a filterable list of options (autocomplete). Options are plain data with groups, descriptions and icons; filter on the client or fetch as the user types.
import { Combobox } from "pleate/combobox";Groups, descriptions, clearable
Selected: Lisbon
Async search, sizes, invalid, disabled
Props
- options
The choices. Options sharing a group are listed under one heading.
{ value, label, description?, icon?, disabled?, group? }[]- value / defaultValue / onValueChange
Chosen option value; controlled or uncontrolled.
string | null- filter
Custom matcher; the default ignores case and accents. false shows every option (server-side filtering).
((option, query) => boolean) | false- onInputChange / loading
Fetch options as the user types and show a spinner meanwhile.
(query: string) => void / boolean- emptyText
Shown when nothing matches.
ReactNodedefault "No results"- clearable
Adds a clear button once a value is chosen.
boolean- variant / size / invalid / disabled
Same field look and heights as Input and Select.
like Input- name
Adds a hidden input with the value for native forms.
string
Accessibility
- ARIA combobox: the input keeps focus, with aria-expanded, aria-controls and aria-activedescendant pointing at the highlighted option in the listbox.
- Arrow keys move, Home and End jump, Enter chooses, Escape closes; typing opens the list.
- Give it an aria-label or aria-labelledby.