单选按钮输入
它让用户在一组互相排斥的选项中只选一个,并始终显示全部可选项。
- 一组圆圈里只能点一个
- 点这个另一个就会取消的圆点
- 只能选一个答案的小圆圈
- 单选框
- 互斥选项
- 圆形选择框
示例
(无)
未选中
空心圆圈
:checked
已选中
填色,中间一个点
:hover
鼠标悬停仅指针
边框变成主色
:focus-visible
键盘选中仅键盘
外面套一圈光环
:disabled
不可用
灰底灰字,点不动
带「仅指针」的状态需要鼠标或触控板:触屏设备上没有悬停这一说,直接就是按下。
带「仅键盘」的状态通常要用 Tab 键走到才出现,鼠标点击一般不显示。
Web / iOS / Android 对照
Web原生支持
桌面与移动端现代浏览器
Radio Button
<input type="radio">
iOS需自己实现
iOS / iPadOS
Radio Button
苹果移动平台没有通用圆形单选按钮,常用列表勾选、菜单或分段控制器表示互斥选择。
通常怎么做:选项少且并列时用 Picker 的分段样式;选项多时用列表行和对勾。
Android原生支持
Android 手机 / 平板
Radio Button
Compose Material 3: RadioButton
使用规范
什么时候用
- 选项数量不多、只能选一个,并且用户需要比较所有选项
什么时候别用
- 允许多选时不要用;选项很多会占满页面时改用选择菜单
容易混淆
给 AI 的提示词
这条词条还没有经过验证的实现提示词。