← 返回 Web 词条

单选按钮

Web原生支持

在 Web 上叫Radio Button

<input type="radio">

适用范围:桌面与移动端现代浏览器

它让用户在一组互相排斥的选项中只选一个,并始终显示全部可选项。

  • 一组圆圈里只能点一个
  • 点这个另一个就会取消的圆点
  • 只能选一个答案的小圆圈
  • 单选框
  • 互斥选项
  • 圆形选择框

示例

Webradio原生支持几个状态同时在场,才比得出差别
  • (无)

    未选中

    空心圆圈

  • :checked

    已选中

    填色,中间一个点

  • :hover

    鼠标悬停仅指针

    边框变成主色

  • :focus-visible

    键盘选中仅键盘

    外面套一圈光环

  • :disabled

    不可用

    灰底灰字,点不动

带「仅指针」的状态需要鼠标或触控板:触屏设备上没有悬停这一说,直接就是按下。

带「仅键盘」的状态通常要用 Tab 键走到才出现,鼠标点击一般不显示。

其他平台的相似实现

iOS需自己实现
该平台没有原生实现

苹果移动平台没有通用圆形单选按钮,常用列表勾选、菜单或分段控制器表示互斥选择。

看 iOS 视角 →

使用规范

什么时候用

  • 选项数量不多、只能选一个,并且用户需要比较所有选项

什么时候别用

  • 允许多选时不要用;选项很多会占满页面时改用选择菜单

容易混淆

Web 出处

查看 Web / iOS / Android 完整对照 →