Switch

An on/off control.

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

Live demo

Loading the Switch demo…

Anatomy

Switch anatomy: each box holds the parts inside it.
  • Switch.Root
    • Switch.Thumb

Behavior checks

tests/behavior/scenarios/switch.spec.ts runs 6 rows against the Switch 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. it is a switch named by its label and described, off
  2. a click turns it on and off
  3. Space and Enter toggle it
  4. a click on its label toggles it
  5. a disabled switch cannot change
  6. on, 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/switch (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).