Combobox

Text input + filtered listbox. ARIA 1.2 combobox pattern with aria-activedescendant discipline.

Inspired by WAI-ARIA 1.2 Combobox, cmdk (Paco Coursey), Apple Spotlight.

Preview

What it looks like.

Type to filter, arrow keys to navigate, Enter to commit. Focus stays in the input — the listbox uses aria-activedescendant.

Selected: Qwen 2.5 7B

Live — the real component, scoped to this frame.

Usage

Drop it into your app.

import { Combobox } from '@locara/components'

<Combobox
  value={appId}
  onValueChange={setAppId}
  options={apps.map(a => ({ value: a.id, label: a.displayName, hint: a.modalities[0] }))}
  placeholder="Search apps…"
  emptyMessage="No apps match"
/>

Or copy the source into your repo: locara add combobox

Design notes

Why it works this way.

Combobox keeps DOM focus on the input and uses aria-activedescendant to indicate the highlighted option — the single most common Combobox bug is moving DOM focus to the listbox options. Filter is case-insensitive substring by default; pass a custom `filter` for fuzzy match.