Select

A button that opens a listbox of options, with groups and typeahead.

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

Live demo

Right to left

Loading the Select demo…

Anatomy

Select anatomy: each box holds the parts inside it.

Select.Root
- Select.Trigger
  - Select.Value
- Select.Portal
  - Select.Content
    - Select.Viewport
      - Select.Group
        Select.GroupLabel
        Select.Item
      - Select.Item

Behavior checks

tests/behavior/scenarios/select.spec.ts runs 10 rows against the Select 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 10 rows

the trigger is a combobox named by its field label, showing the value
with consumer ids, a <label for> names the trigger and it controls the list by its own id
clicking opens a listbox of options, the current one selected
the keyboard opens it, moves and picks an option
a disabled option is announced as disabled
a disabled option cannot be chosen
typing a letter moves to the matching option
the chosen value is submitted with the form
options sit in labelled groups; arrows cross groups and skip disabled
Escape closes it and focus returns to the trigger

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/select (pnpm size).
Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).