UI · №17 · PLATE

选择控件（怎么选）Switch vs Checkbox vs Radio

加个选择开关按钮打勾的框单选圆点

先看怎么选

「加个选择」先回答两个问题：拨一下立即生效还是提交才算？选一个还是选多个？说错了 agent 把你的即时开关做成了要点保存的复选框。

朱批拨一下立刻生效 → Switch；可多选/随表单提交 → Checkbox；一组里必选一个 → Radio。

开关

Switch (Toggle)

二元设置的即时开关——拨动立刻生效，没有"保存"这一步。

适合: 通知开关、深色模式这类改了马上生效的设置。
不适合: 需要和其他字段一起提交的表单项——用户会以为已经生效了。

实现细节与 Prompt

web: role="switch" + aria-checked
react: <Switch>（Radix/shadcn）

Use a toggle switch for the notifications setting: takes effect immediately on toggle (no save button), with role="switch" and a sliding thumb animation. Show a small status text that updates instantly to prove it applied.

复选框

Checkbox

相互独立的多选项，随表单一起提交；父级可有半选态。

适合: 多选兴趣、批量选择列表行、同意条款。
不适合: 立即生效的单一设置——那是 Switch 的语义。

实现细节与 Prompt

web: input type=checkbox + indeterminate
react: <Checkbox>（Radix/shadcn）

Use checkboxes for selecting multiple interests in a form: independent choices submitted with the form, plus a parent 'select all' checkbox that shows an indeterminate state when only some children are selected.

单选钮

Radio

一组互斥选项里必选且只能选一个。

适合: 配送方式、支付方式——选项少且互斥时。
不适合: 选项超过 5~7 个——下拉 Select 更省地方。

实现细节与 Prompt

web: input type=radio 同 name 分组 + 方向键
react: <RadioGroup>（Radix/shadcn）

Use radio buttons for the shipping method: one named group, exactly one selectable at a time, arrow keys move the selection within the group.

详细说明

三个控件长得都像「选择」，但语义契约不同：Switch 承诺立即生效，Checkbox 承诺独立多选，Radio 承诺互斥必选。契约说清，agent 连“要不要保存按钮”都会替你想对。