Checkbox

A two- or three-state checkbox, alone or in a group.

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

Live demo

Loading the Checkbox demo…

Anatomy

Checkbox anatomy: each box holds the parts inside it.
  • Checkbox.Groupoptional
    • Checkbox.Root
      • Checkbox.Indicator

Behavior checks

tests/behavior/scenarios/checkbox.spec.ts runs 7 rows against the Checkbox 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. it is a checkbox named by its label and described, unchecked
  2. a click toggles it
  3. Space toggles it
  4. a click on its label toggles it
  5. partly selected is announced as mixed
  6. a disabled checkbox cannot change
  7. checked, its value is submitted with the form

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