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.
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.
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 |