Switch vs. Checkbox vs. Radio 开关 Switch vs. 复选框 Checkbox vs. 单选按钮 Radioweb
Controls for an on/off setting, independent choices, or one choice from a group
三种控件：管开/关的设置、各自独立的多选、组内只能选一个
also called也叫
toggle switch, check box, radio button, option button拨动开关、勾选框、单选钮、选项按钮
If you called it…如果你管它叫……
“the on off sliding control”「左右滑来开关的那个控件」
“the square box with a checkmark”「带对勾的方框」
“the circles where only one can be picked”「只能选一个的圆圈」
“a setting that changes immediately”「一拨就立刻生效的设置」
“choose several versus choose exactly one”「能选好几个 vs. 只能选一个」
Switch
Checkbox
Radio
标本可交互，可以直接操作。
Anatomy — every part, named解剖 —— 每个部件的名字
1Switch thumb开关滑钮role="switch"
“The little circle that slides left and right” is the switch thumb.
「左右滑动的那个小圆钮」就是开关滑钮。
Prompt fragmentPrompt 片段
the circular thumb inside a role="switch" control, sliding to the checked side when on
role="switch" 控件里的圆形滑钮，打开时滑向选中一侧
2Switch track开关轨道role="switch"
“The rounded pill behind the moving circle” is the switch track.
「滑动圆钮后面那条胶囊形的槽」就是开关轨道。
Prompt fragmentPrompt 片段
the capsule-shaped track behind a role="switch" thumb, changing fill with the checked state
role="switch" 滑钮后面的胶囊形轨道，随选中状态改变填充色
3Checkbox checkmark复选框对勾<input type="checkbox">
“The tick that appears inside the square box” is the checkbox checkmark.
「方框里出现的那个勾」就是复选框对勾。
Prompt fragmentPrompt 片段
the native checkmark inside a checked <input type="checkbox">
选中的 <input type="checkbox"> 里的原生对勾
4Radio selection dot单选圆点<input type="radio">
“The filled dot inside the chosen circle” is the radio selection dot.
「选中圆圈里那个实心点」就是单选圆点。
Prompt fragmentPrompt 片段
the centered selection dot inside the checked <input type="radio"> of a same-name group
同名组里选中的 <input type="radio"> 中央的选中圆点
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Use an <input type="checkbox" role="switch"> for the binary on/off setting, a native <input type="checkbox"> for each independent checked choice, and same-name <input type="radio"> controls when exactly one option is allowed. Give every control a visible clickable label and expose its checked state through the native control.
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my switch/checkbox/radio. Rule out: the control flipping visually while state stays stale — controlled input without onChange; label clicks not toggling because for/id association is missing; radios not behaving as a group because their name attributes differ; the indeterminate checkbox state gone — it is settable only from JS, not markup. The symptom:
调试我的开关/复选框/单选按钮。排查：控件视觉上翻转了但状态没更新——受控 input 没写 onChange；点标签不切换，因为缺 for/id 关联；单选按钮不成组，因为 name 属性不一致；复选框的半选（indeterminate）状态丢了——它只能用 JS 设置，标记里写不了。症状：
# Switch vs. Checkbox vs. Radio · 开关 Switch vs. 复选框 Checkbox vs. 单选按钮 Radio
UI reference — https://K3tty5555.github.io/LearnUI_PM/web/switch-checkbox-radio/
**Controls for an on/off setting, independent choices, or one choice from a group**
三种控件：管开/关的设置、各自独立的多选、组内只能选一个
**Also called / 也叫:** toggle switch, check box, radio button, option button / 拨动开关、勾选框、单选钮、选项按钮
## Anatomy — every part, named / 解剖
1. **Switch thumb · 开关滑钮** (`role="switch"`)
“The little circle that slides left and right” is the switch thumb.
「左右滑动的那个小圆钮」就是开关滑钮。
Prompt fragment: the circular thumb inside a role="switch" control, sliding to the checked side when on
2. **Switch track · 开关轨道** (`role="switch"`)
“The rounded pill behind the moving circle” is the switch track.
「滑动圆钮后面那条胶囊形的槽」就是开关轨道。
Prompt fragment: the capsule-shaped track behind a role="switch" thumb, changing fill with the checked state
3. **Checkbox checkmark · 复选框对勾** (`<input type="checkbox">`)
“The tick that appears inside the square box” is the checkbox checkmark.
「方框里出现的那个勾」就是复选框对勾。
Prompt fragment: the native checkmark inside a checked <input type="checkbox">
4. **Radio selection dot · 单选圆点** (`<input type="radio">`)
“The filled dot inside the chosen circle” is the radio selection dot.
「选中圆圈里那个实心点」就是单选圆点。
Prompt fragment: the centered selection dot inside the checked <input type="radio"> of a same-name group
## Prompt / 提示词
Use an <input type="checkbox" role="switch"> for the binary on/off setting, a native <input type="checkbox"> for each independent checked choice, and same-name <input type="radio"> controls when exactly one option is allowed. Give every control a visible clickable label and expose its checked state through the native control.
开/关二元设置用 <input type="checkbox" role="switch">；各自独立的勾选项用原生 <input type="checkbox">；只能选一个时用同名的一组 <input type="radio">。每个控件都要有可见、可点的标签，选中状态通过原生控件暴露。
## Debug prompt / 调试提示词
Debug my switch/checkbox/radio. Rule out: the control flipping visually while state stays stale — controlled input without onChange; label clicks not toggling because for/id association is missing; radios not behaving as a group because their name attributes differ; the indeterminate checkbox state gone — it is settable only from JS, not markup. The symptom:
调试我的开关/复选框/单选按钮。排查：控件视觉上翻转了但状态没更新——受控 input 没写 onChange；点标签不切换，因为缺 for/id 关联；单选按钮不成组，因为 name 属性不一致；复选框的半选（indeterminate）状态丢了——它只能用 JS 设置，标记里写不了。症状：
## In code / 代码里叫什么
- **HTML** `<input type="checkbox" role="switch">`
- **HTML** `<input type="checkbox">`
- **HTML** `<input type="radio">`
- **shadcn/ui** `Switch`
- **shadcn/ui** `Checkbox`
