Single selection · center
Toggle Group (Segmented Control)
/ ToggleGroup · role="radiogroup" /
also called segmented control, button group, view switcher, segmented button
A toggle group is a compact row of related buttons that behave as one selection control. In single-select form it is often called a segmented control and works well for switching a view or mode immediately. Unlike tabs, it changes a setting or presentation rather than labeling separate content panels.
If you called it…
…you meant a toggle group (segmented control).
Anatomy — every part, named
- 1Selected toggle
aria-checked“The button in the group that stays filled” is the selected toggle.
- 2Segment divider
ToggleGroup“The little line between two choices in the pill” is the segment divider.
Prompt — paste into your agent
Build a persistent single-select Toggle Group using Radix ToggleGroup. Present the connected buttons as one segmented control, expose the group as role="radiogroup" with role="radio" items and aria-checked state, and support arrow-key movement between segments.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my toggle group (aria-pressed, Radix ToggleGroup). Rule out: single vs multiple semantics mixed up — one behaves like radios, the other like checkboxes; the pressed state invisible because only color changes and not enough of it; deselecting the last item leaving nothing active when one must always stay on; arrow keys dead because roving focus is unimplemented. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| Radix | ToggleGroup | |
| ARIA | role="radiogroup" | |
| ARIA | role="radio" | |
| ARIA | aria-checked | |
| shadcn/ui | ToggleGroup |