← 返回 Web 词条Webradio原生支持几个状态同时在场,才比得出差别
单选按钮
在 Web 上叫Radio Button
<input type="radio">
它让用户在一组互相排斥的选项中只选一个,并始终显示全部可选项。
- 一组圆圈里只能点一个
- 点这个另一个就会取消的圆点
- 只能选一个答案的小圆圈
- 单选框
- 互斥选项
- 圆形选择框
示例
(无)
未选中
空心圆圈
:checked
已选中
填色,中间一个点
:hover
鼠标悬停仅指针
边框变成主色
:focus-visible
键盘选中仅键盘
外面套一圈光环
:disabled
不可用
灰底灰字,点不动
带「仅指针」的状态需要鼠标或触控板:触屏设备上没有悬停这一说,直接就是按下。
带「仅键盘」的状态通常要用 Tab 键走到才出现,鼠标点击一般不显示。
其他平台的相似实现
iOS需自己实现
该平台没有原生实现苹果移动平台没有通用圆形单选按钮,常用列表勾选、菜单或分段控制器表示互斥选择。
看 iOS 视角 →Android原生支持
Radio Button同名看 Android 视角 →使用规范
什么时候用
- 选项数量不多、只能选一个,并且用户需要比较所有选项
什么时候别用
- 允许多选时不要用;选项很多会占满页面时改用选择菜单