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.