Combobox

heaviest of the eight, by js weight

An editable combobox with list autocomplete, implementing APG 1.2. Client-only at every tier: even the plain abaabil/combobox entry carries 'use client', because tracking the highlighted option requires JavaScript state regardless of tier.

Example (a11y tier)

Favorite fruit

Import

import Combobox from 'abaabil/combobox'         // open/filter/select, no ARIA

import Combobox from 'abaabil/combobox/styled'  // + CSS

import Combobox from 'abaabil/combobox/a11y'    // + APG 1.2 combobox pattern

What the a11y tier adds

Implements the APG 1.2 editable combobox with list autocomplete: role="combobox", aria-expanded, aria-controls, aria-autocomplete="list", a role="listbox" of role="option" items.
Focus stays on the input at all times. This pattern cannot use roving tabindex because the user types while browsing the list, so the active option is conveyed solely through aria-activedescendant.
Arrow keys move the active option, Enter commits it, Escape closes the list (or clears the query if already closed), Tab commits and moves on.
A live region announces the result count as you type, for screen reader users who cannot see the list.
IME composition is respected: an Enter that confirms a composed character (Arabic, Urdu, CJK, ...) does not commit an option.

Props

Prop	Type	Default	Tier	Description
`options`	Array<{value, label}>	`[]`	all	The list to filter and select from.
`onChange`	function	—	all	Called with the selected `value`. On the a11y tier, also called with `null` when a selection is cleared (Escape while closed).
`placeholder`	string	—	all	Input placeholder text.
`className`	string	—	all	Merged onto the wrapper element.
`label`	string	—	a11y	Accessible name for the input. Warns in development if omitted.
`hideLabel`	boolean	`true`	a11y	Visually hide the label (it stays in the accessibility tree either way).
...props	—	—	all	Extra props (`id`, `name`, `required`, `aria-describedby`, `autoFocus`, event handlers, ...) land on the input. A consumer-supplied `onFocus`/`onClick`/`onBlur`/`onKeyDown` composes with the component's own handler rather than replacing it.

Uncontrolled

The combobox is uncontrolled in 1.x: there is no value prop. The input manages its own text internally, and selection is observed only through onChange.