Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  3. Toggle Group
  5. Accessibility

Toggle group

Accessibility

ToggleGroup from @prepared911/ui wraps Radix ToggleGroup to render a small cluster of exclusive modes. The primitive handles roving focus and press state; your job is to label the group, name each toggle, and connect selection to the visible outcome.
What the component handles
  • Group semantics. Container exposes role="group" (or a radio-group behavior when configured).
  • Press state. Each item exposes aria-pressed reflecting its toggled state.
  • Roving focus. Arrow keys move between toggles; Tab enters and exits the group.
What you must provide
  • Group label. Provide aria-label or aria-labelledby on the root so the purpose of the cluster is announced.
  • Toggle names. Every toggle needs an accessible name—from visible text or an icon-paired aria-label.
  • Consequence without confirmation. Selecting a toggle should immediately update the view; don't require an additional submit.
Keyboard behavior
  • Tab moves focus into the group.
  • Arrow keys move between toggles.
  • Enter / Space activate the focused toggle.
Semantics and roles
  • role="group" on the container.
  • Items expose aria-pressed="true" or "false".
  • Icons inside toggles use aria-hidden="true" when text or an aria-label provides the name.
Known caveats
  • More than five modes. If the cluster grows past five items, switch to Select or Tabs.
  • Color-only active state. Pressed state must be distinguishable beyond color—filled background, border weight, or an inset shadow.
Previous
Toggle Group / API and Development
Next
Token / Usage
On this page
What the component handles
What you must provide
Keyboard behavior
Semantics and roles
Known caveats