Toggle Group (Segmented Control) 切换组 Toggle Group（分段控件 Segmented Control） web
A connected row of compact options with one persistent selection
连成一排的紧凑选项，其中一项保持选中
Single selection · center
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Selected toggle选中的切换项
aria-checked“The button in the group that stays filled” is the selected toggle.
「组里那个一直实心填充的按钮」就是选中的切换项。
Prompt fragmentPrompt 片段the role="radio" toggle with aria-checked="true", using a persistent selected fill
role="radio" 且 aria-checked="true" 的切换项，用持续的选中填充样式
-
2 Segment divider分段分隔线
ToggleGroup“The little line between two choices in the pill” is the segment divider.
「胶囊里两个选项之间的那条小竖线」就是分段分隔线。
Prompt fragmentPrompt 片段the divider between adjacent Radix ToggleGroup items inside one connected control
连成一体的控件里，相邻 Radix ToggleGroup 项之间的分隔线
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
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.
用 Radix ToggleGroup 构建一个持久单选的切换组。外观上把相连的按钮呈现为一个分段控件；语义上整组暴露为 role="radiogroup"，各项为 role="radio" 并带 aria-checked 状态；支持方向键在分段间移动。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
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:
调试我的切换组（aria-pressed、Radix ToggleGroup）。排查：single 和 multiple 语义搞混——一个像单选按钮组，一个像复选框组；按下态看不出来，因为只有颜色变化、且对比不够；取消选中最后一项导致没有选中项，而设计上必须总有一项开着；方向键失灵，因为没实现 roving focus。症状：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| Radix | ToggleGroup | |
| ARIA | role="radiogroup" | |
| ARIA | role="radio" | |
| ARIA | aria-checked | |
| shadcn/ui | ToggleGroup |