Command

A search field over a filtered, grouped command list.

Import
import { Command } from '@texuli/primitives/command';
Pattern
Combobox with listbox popup (WAI-ARIA APG)
Size budget
20.0 KiB gzip for @texuli/primitives/command
Reference
packages/primitives/docs/prim-command.md

Live demo

Loading the Command demo…

Anatomy

Command anatomy: each box holds the parts inside it.
  • Command.Root
    • Command.Input
    • Command.List
      • Command.Group
        • Command.GroupHeading
        • Command.GroupItems
          • Command.Item
      • Command.Empty
      • Command.Loading

Behavior checks

tests/behavior/scenarios/command.spec.ts runs 5 rows against the Command 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 5 rows
  1. the list and its groups are named
  2. typing filters the items
  3. no match shows the empty state
  4. arrow keys move the selected item, looping
  5. Enter runs the selected item

Limits

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