Switch vs. Checkbox vs. Radio 开关 Switch vs. 复选框 Checkbox vs. 单选按钮 Radio web
Controls for an on/off setting, independent choices, or one choice from a group
三种控件：管开/关的设置、各自独立的多选、组内只能选一个
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Switch 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" 控件里的圆形滑钮，打开时滑向选中一侧
-
2 Switch 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" 滑钮后面的胶囊形轨道，随选中状态改变填充色
-
3 Checkbox 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"> 里的原生对勾
-
4 Radio 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.
开/关二元设置用 <input type="checkbox" role="switch">；各自独立的勾选项用原生 <input type="checkbox">；只能选一个时用同名的一组 <input type="radio">。每个控件都要有可见、可点的标签，选中状态通过原生控件暴露。
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 设置，标记里写不了。症状：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| HTML | <input type="checkbox" role="switch"> | |
| HTML | <input type="checkbox"> | |
| HTML | <input type="radio"> | |
| shadcn/ui | Switch | |
| shadcn/ui | Checkbox |