Combobox

Search named options without confusing typed text with a committed choice.

Interactive preview

Live specimenTry the component

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add combobox

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Field label="Reviewer">
  <Combobox name="reviewer" value={reviewer} onValueChange={setReviewer}
    options={[{ value: 'alex', label: 'Alex Morgan', keywords: ['design'] }]} />
</Field>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`options`	`ComboboxOption[]: value, label, description?, disabled?, group?, keywords?`	`required`
`value / defaultValue / onValueChange`	`committed string value / (string) => void`	`''`
`onInputChange`	`(query: string) => void`	`optional; query is local`
`open / defaultOpen / onOpenChange`	`boolean / boolean / (boolean) => void`	`false`
`size / name / form / required / disabled / readOnly`	`shared native form and size contracts`	`md / optional / false`
`loading / emptyMessage`	`boolean / string`	`false / No options found.`

Accessibility

Editable, discrete-value combobox: typing filters labels/keywords with case/diacritic normalization; arbitrary text is never submitted as a choice. DOM focus remains on the input and aria-activedescendant follows the enabled option. Arrow keys explore, Enter commits, Escape/blur restores the committed label, Tab leaves without selecting an uncommitted result. Clearing text clears the selected value. Native text-editing keys and IME composition are preserved. A hidden native select handles name/form, required validation and uncontrolled form reset. Provide a real label; loading/empty content is announced as an unavailable option. Disabled options do not activate. Controlled value belongs to the application; search text is local and onInputChange reports it. No multi-select, creatable values, virtualization or network fetching is supplied. Ref/native attributes target the text input.