ToggleGroup from @prepared911/ui-core 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.
- 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.
- Tab moves focus into the group.
- Arrow keys move between toggles.
- Enter / Space activate the focused toggle.
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.
- More than five modes. If the cluster grows past five items, switch to
Select or TabMenu.
- Color-only active state. Pressed state must be distinguishable beyond color—filled background, border weight, or an inset shadow.
