单选框 Radio
用户填写周末活动报名表,需要在公共交通、自驾和骑行中确定一种到达方式。
前端与交互约 10 分钟 · 从真实需求理解
1为什么一组答案只能留下一个?
周末活动报名
到集合点怎么去?
Radio 用一组共享的选择关系表达互斥答案:用户可以在选项之间移动,但同一组最终只能保留一个 checked。
在活动报名里,公共交通、自驾和骑行是三种到达方式,不是三个可以叠加的偏好;改选自驾后,公共交通就应该回到未选中。
2Radio 和 Checkbox、Switch,边界在哪里?
Radio ≠ Checkbox:Radio 表达同一组答案只能选一个,Checkbox 则让多个独立选项同时成立。
- 当用户需要在互斥方案中做一个决定,例如一种交通方式或一种配送方式,使用 Radio。
- 当每项都可以独立打开或关闭,例如多个提醒渠道,使用 Checkbox;只有单个偏好开或关时使用 Switch。
判断控件时先问“答案能不能同时成立”,不要先看它画成圆点还是方框。
3一个 Radio 选项组由哪些真实部分组成?
周末活动报名
到集合点怎么去?
Radio 选项组由可被辅助技术识别的组标题、共享 name 的真实 radio、对应的选项文字和当前 checked 状态组成。
- fieldset 与 legend 说明这组答案在回答同一个问题。
- 每个 radio 都要和自己的 label 文字对应,用户点击文字也能改变选择。
- 同组控件共享选择关系,但每个选项仍要能被单独聚焦、读出和判断。
4Radio 的状态如何表达?
未选中
已选中
禁用
未选中、已选中和禁用不是三个不同控件,而是同一组 Radio 在可选性和当前答案上的不同状态。
5报名动作如何留下唯一结果?
报名时选择到达方式
活动报名表单周末活动报名
提交前确认一种到达方式。
在真实报名表中,Radio 的价值不只是显示圆点,而是让用户改选后仍能明确知道表单最后会提交哪一个答案。
6什么时候该用 Radio?
答案互斥,改选会替换原来的交通方式。
每项偏好都能独立成立时改用 Checkbox。
单一二态偏好用 Switch,不需要制造一组互斥答案。
活动提醒已开启
先判断答案关系:只能保留一个答案时用 Radio;多个独立条件可以同时成立时用 Checkbox;单个偏好只有开和关时用 Switch。
7怎样把 Radio 需求告诉 Agent?
请在周末活动报名表中使用一组真实 Radio 表达交通方式:公共交通、自驾和骑行只能保留一个答案,改选时替换之前的 checked。请保留 fieldset/legend、共享 name、键盘方向键和窄屏可读间距;验收时确认不会同时提交两个交通方式,也不要把它实现成 Checkbox 或 Switch。
8不用背,看看你能不能判断
1 / 3
一组交通方式只能提交一个答案时,应该优先使用什么?
请选择一个最符合题意的答案
社区延伸
看别人真实遇到过什么
社区帖子还没有关联到这个词条。