formstexulinot agent-emittableapp
ToggleGroup
toggle-group
A group of toggle buttons: one value, or several.
Forms with the wiring documented, not guessed. Form controls take labels, descriptions and error text through props, and their keyboard and screen-reader behavior is documented in the accessibility notes below — generated from the manifest, not hand-maintained. The repository’s behavior suite holds the underlying patterns on Chromium, WebKit and a Pixel 7.
Live examples
Alignment
Alignment
Loading demo…
In your theme
This page renders in the site theme, enterprise-neutral. Every one of the 210 library themes re-colors every component through the --tx-* contract. The three below carry real token values from the library, rendered at build — no island, no extra requests.
Violet
backgroundsurfaceprimaryaccentborder
Monochrome
backgroundsurfaceprimaryaccentborder
Accessible Dark Contrast
backgroundsurfaceprimaryaccentborder
Props
| Name | Kind | Required | Default | Description |
|---|---|---|---|---|
type | enum (single, multiple) | no | "single" | — |
value | string | no | — | Pressed value, or an array when type is multiple |
disabled | boolean | no | false | — |
orientation | enum (horizontal, vertical) | no | "horizontal" | — |
variant | enum (default, outline) | no | "default" | — |
size | enum (sm, md, lg) | no | "md" | — |
name | string | no | — | — |
onValueChange | event | no | — | — |
class | string | no | — | — |
children | slot | no | — | — |
Keyboard
| Key | Action |
|---|---|
A, Space | A labelled toolbar of toggle buttons; arrows move, Space presses. |
Accessibility
- A labelled toolbar of toggle buttons; arrows move, Space presses.
Evidence for toggle-group
Latest committed gates for toggle-group (as of 2026-10-23). Static snapshot — not live CI.
Behavior
checkedscenario toggle
Rows in tests/behavior/scenarios/toggle.spec.ts, held to the WAI-ARIA APG pattern, run on Chromium and WebKit, and its touch rows on the Pixel 7.
Size (gzip)
texuli/toggle-group · budget 12.0 KiB
Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.
Axe
documented
tests/e2e/site-component-pages.spec.tsdocs/quality (a11y-*)
Site component pages axe gate; package-level a11y docs under docs/quality when present.
Browsers
chromiumwebkitmobile
Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.
When to use
Use when
- A small closed set of filters or views the person toggles
Don’t use when
Prefer another component
- A single on/off (use switch or toggle)
- A long list of options (use checkbox)