Toggle

A pressed/unpressed button, alone or in a group.

Import
import { Toggle, ToggleGroup } from '@texuli/primitives/toggle';
Pattern
Button (toggle) (WAI-ARIA APG)
Size budget
5.0 KiB gzip for @texuli/primitives/toggle
Reference
packages/primitives/docs/prim-toggle.md

Live demo

Loading the Toggle demo…

Anatomy

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

Behavior checks

tests/behavior/scenarios/toggle.spec.ts runs 5 rows against the Toggle 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. a toggle starts off and click toggles aria-pressed on and off
  2. a disabled toggle cannot change
  3. single group selects one value and clears on second press
  4. multiple group keeps independent pressed items
  5. arrow keys move focus between group items

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