Combobox

A text input that filters a popup list of options, for one or many values.

Import
import { Combobox } from '@texuli/primitives/combobox';
Pattern
Combobox (WAI-ARIA APG)
Size budget
24.0 KiB gzip for @texuli/primitives/combobox
Reference
packages/primitives/docs/prim-combobox.md

Live demo

Loading the Combobox demo…

Anatomy

Combobox anatomy: each box holds the parts inside it.
  • Combobox.Root
    • Combobox.Chipsmultiple
      • Combobox.Chip
        • Combobox.ChipRemove
    • Combobox.Input
    • Combobox.Trigger
    • Combobox.Portal
      • Combobox.Content
        • Combobox.Viewport
          • Combobox.Item
          • Combobox.Empty
          • Combobox.Loading
          • Combobox.Error

Behavior checks

tests/behavior/scenarios/combobox.spec.ts runs 6 rows against the Combobox scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 6 rows
  1. the input is a combobox named by its label, collapsed
  2. consumer ids stay: the label names the input and it controls the list by its own id
  3. typing opens the list and filters it
  4. arrow keys and Enter pick an option, which fills the input
  5. Escape closes the list and keeps focus in the input
  6. a value set from outside shows in the input

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 24.0 KiB gzip for @texuli/primitives/combobox (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).