单选框Radio

你可能会说

这几个选项只能选一个,选了新的要把旧的取消掉。

单选框是一组只能选中其中一个选项的表单控件选择支付方式或可见范围时,可将少量互斥选项直接列出。每组要有清楚的问题说明;选项较多或需要搜索时应改用 选择器 Select

什么时候用

  • 少量互斥选项,直接平铺便于比较
    全部进行中已完成
  • 隐私、可见范围这类关键设置
    公开仅成员私密
  • 选项需要附带说明:费用、时效写旁边
    标准配送 免费 · 约 3 天
    加急配送 ¥8 · 明天到
  • 支付方式:经典的单选场景
    支付宝
    微信支付
    银行卡

什么时候不用

  • 选项较多且难以直接比较:使用 选择器 Select
    北京上海广州深圳杭州成都武汉西安
    选项过多,难以快速比较
  • 只有一个“同意协议”确认项:使用 复选框 Checkbox
    我已阅读并同意《用户协议》
    只有一个选项,不需要使用单选组
  • 允许多选:使用 复选框 Checkbox
    前端后端设计
    需要多选时应使用复选框
  • 需要取消选择时,增加“无”选项或改用复选框 Checkbox
    点过的单选取消不掉
组成结构 · Anatomy
仅自己可见
整行都能点,不只是圆点
选中后实心,同组互斥
说清楚选了意味着什么
常见变体 · Variants
默认Default
互斥选项不多时的标准形态
按钮样式Button
按月付按年付
选项少而短,想要更醒目好点
带说明With Desc
选项要附带费用、时效等解释
禁用Disabled
某选项当前不可选但仍需展示
典型使用场景
支付方式选择
选择支付方式¥ 658.00
性别选择
完善个人资料
姓名
性别
生日
可见范围设置
谁可以看这条动态?
配送方式
配送方式
送至:杭州市西湖区文三路 100 号修改
延伸阅读 · 权威出处