单选框Radio
你可能会说
这几个选项只能选一个，选了新的要把旧的取消掉。
单选框是一组只能选中其中一个选项的表单控件选择支付方式或可见范围时，可将少量互斥选项直接列出。每组要有清楚的问题说明；选项较多或需要搜索时应改用 选择器 Select。
你可以这样告诉 AI Agent
把 4 个取货时间段做成一组始终可见的单选项，只允许选一个。请验证点击文字也能选择、键盘可以切换，并且选择新时段会取消旧时段。
什么时候用
- 少量互斥选项，直接平铺便于比较全部进行中已完成
- 隐私、可见范围这类关键设置公开仅成员私密
- 选项需要附带说明：费用、时效写旁边标准配送 免费 · 约 3 天加急配送 ¥8 · 明天到
- 支付方式：经典的单选场景支付宝微信支付银行卡
什么时候不用
- 选项较多且难以直接比较：使用 选择器 Select北京上海广州深圳杭州成都武汉西安…选项过多，难以快速比较
- 只有一个“同意协议”确认项：使用 复选框 Checkbox我已阅读并同意《用户协议》只有一个选项，不需要使用单选组
- 允许多选：使用 复选框 Checkbox前端后端设计需要多选时应使用复选框
- 需要取消选择时，增加“无”选项或改用复选框 Checkbox男女点过的单选取消不掉
组成结构 · Anatomy
仅自己可见
整行都能点，不只是圆点
选中后实心，同组互斥
说清楚选了意味着什么
常见变体 · Variants
默认Default
互斥选项不多时的标准形态
按钮样式Button
按月付按年付
选项少而短，想要更醒目好点
带说明With Desc
选项要附带费用、时效等解释
禁用Disabled
某选项当前不可选但仍需展示
典型使用场景
延伸阅读 · 权威出处
快速练习