单选框Radio
填写与选择从几个选项中选择一个
支付方式、可见范围等互相排斥的选项，可以用单选框全部摆出来。每组都要有清楚的问题说明；选项很多或需要搜索时，再考虑使用选择器 Select。
什么时候用
- 2~5 个互斥选项，全部亮出来全部进行中已完成
- 隐私、可见范围这类关键设置公开仅成员私密
- 选项需要附带说明：费用、时效写旁边标准配送 免费 · 约 3 天加急配送 ¥8 · 明天到
- 支付方式：经典的单选场景支付宝微信支付银行卡
什么时候不用
- 选项超过五六个 → 收进 选择器 Select北京上海广州深圳杭州成都武汉西安…一屏放不下，眼睛看花了
- 只有一个“同意协议” → 那是 复选框 Checkbox 的活我已阅读并同意《用户协议》只有一个选项，根本没得“选”
- 允许多选 → 用 复选框 Checkbox前端后端设计想多选？单选框做不到
- 需要取消选择时，增加“无”选项或改用复选框 Checkbox男女点过的单选取消不掉
组成结构 · Anatomy
仅自己可见
1单选项Radio整行都能点，不只是圆点
2圆点Dot选中后实心，同组互斥
3选项文案Label说清楚选了意味着什么
常见变体 · Variants
默认Default
互斥选项不多时的标准形态
按钮样式Button
按月付按年付
选项少而短，想要更醒目好点
带说明With Desc
选项要附带费用、时效等解释
禁用Disabled
某选项当前不可选但仍需展示
典型使用场景