RadioGroup

A set of radio buttons where one is checked, with arrow-key movement.

Import
import { RadioGroup } from '@texuli/primitives/radio-group';
Pattern
Radio group (WAI-ARIA APG)
Size budget
5.0 KiB gzip for @texuli/primitives/radio-group
Reference
packages/primitives/docs/prim-radio-group.md

Live demo

Loading the RadioGroup demo…

Anatomy

RadioGroup anatomy: each box holds the parts inside it.
  • RadioGroup.Root
    • RadioGroup.Item

Behavior checks

tests/behavior/scenarios/radio-group.spec.ts runs 7 rows against the RadioGroup 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 7 rows
  1. a radiogroup named by its label, with named radios and one checked
  2. the group is one Tab stop, on the checked radio
  3. starting on a later radio, Tab lands on that checked radio, not the first
  4. after the value changes, Tab into the group lands on the newly checked radio
  5. arrow keys move and select, skipping the disabled radio
  6. a click selects a radio
  7. the selected value is submitted with the form

Limits

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