Listbox

An inline list of options with single or multiple selection.

Import
import { ListboxRoot, ListboxOption } from '@texuli/primitives/listbox';
Pattern
Listbox (WAI-ARIA APG)
Size budget
4.0 KiB gzip for @texuli/primitives/listbox
Reference
packages/primitives/docs/prim-listbox.md

Live demo

Loading the Listbox demo…

Anatomy

Listbox anatomy: each box holds the parts inside it.
  • ListboxRoot
    • ListboxOption

Behavior checks

tests/behavior/scenarios/listbox.spec.ts runs 6 rows against the Listbox 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 single listbox is named and exposes its selected option
  2. pointer activation selects an enabled option
  3. arrow keys move the active descendant and selection
  4. the multiple listbox can select more than one option
  5. disabled options cannot be selected
  6. the listbox examples have no axe violations

Limits

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