SPT术语库

单选框 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

一组交通方式只能提交一个答案时,应该优先使用什么?

请选择一个最符合题意的答案

选择答案后自动进入下一题

社区延伸

看别人真实遇到过什么

社区帖子还没有关联到这个词条。