Combobox

Combobox lets people type to filter a long list and pick one option, or several with chips. Author the options; a small init() module filters and keeps ARIA in sync.

Public web API

An input with role="combobox" and a manual popover listbox. Focus stays in the input; aria-activedescendant points at the active option.

Author every option with a unique id and a data-value. Name the hidden input, never the text input.
data-bitsy-combobox-multiple on the root adds chips from a data-bitsy-combobox-chip-template.
The <input list> form needs no script and allows free text.
init() fires a bubbling change event on the root. Arrow keys move, Enter or click selects, Escape closes, a second Escape clears.

Variants and states

Try the keyboard: type, Down, Enter. Preselected options show a check.

Single

Time zone

Preselected, small

Time zone

Large

Time zone

Invalid

Time zone

Pick a time zone from the list.

Disabled

Time zone

Multiple, chips

Labels

Native datalist

Browser (native list, free text)

Bit boundary

Use Select or Radio Group for fewer than about 15 options, and Command Palette to run actions.
Async options, inline autocomplete, and creating options from typed text are out of scope.