单选框Radio

选 B，A 自动取消

在同一组单选框里点新的选项，旧选项会立刻退出——这是 radio 最核心的互斥行为。下面是「配送下单」的选项区，亲手操作一遍。

面板教会的知识点

把刚才操作里看到的现象命名为四条规则。

• 互斥靠 name 分组：同一 name 的 radio 浏览器只允许一个选中，选新项会自动取消旧项，不需要你写取消逻辑。
• 默认值或必选：配送有合理默认（快递）；联系偏好没有默认就必须选，未选时提交会被锁住并给出原因。
• 键盘按组移动：Tab 进入一组后，方向键在同一 name 的选项间移动焦点并改选，不必逐个 Tab。
• 结果长在物件上：选中项的圆点变实心、标签加「已选」徽标、边框转移；读屏同时朗读选中状态，圆点颜色不是唯一线索。

什么时候用单选框

从选项之间的关系判断，而不是看控件长什么样。

• 适合用：选项互斥——选了一个，其他就不成立。例如配送方式、套餐档位、默认联系渠道。
• 不要用：选项可以共存——兴趣标签、通知渠道、权限集合，应使用复选框，否则会逼用户丢掉合法组合。
• 选项太多时：超过 5–6 个或需要搜索，改用下拉选择器（select），避免一长排单选挤爆屏幕。

怎么用：从分组到校验

最短路径——分组、默认、键盘、必选校验一次到位。

1. 用 fieldset 和 legend 写清这组问题（如「配送方式」）；同组 radio 共享同一个 name。
2. 每个选项用 label 包住 input，写清主标签和费用、时间等细节；默认值要么合理要么留空必选。
3. 键盘走一遍：Tab 进入组，方向键在选项间移动，确认互斥和焦点环都正常。
4. 如果必选：未选时提交要锁住，并在这一组的边框和提示上说明原因和下一步，不能只靠底部文案。

正反例：同一个「通知渠道」需求

只改一个关键判断——选项能不能同时成立。