Radio Button
单选按钮
WebMobileDesktop上手难度: 容易
一排圆点，选中其中一个。选了一个，另一个自动取消。
Live Demo
真的可以点你刚才看到的这个：登录页的「个人 / 企业」两个圆点、照片尺寸选择里的圆形单选、支付方式列表前面的圆圈。
它到底是什么
Radio 的价值是「互斥」。它比下拉框更快（所有选项都可见，一眼扫完），但会占用垂直空间。选项少于 5 个时它通常比 Select 更好。
单选框radio buttonradio单选按钮圆点选择
Anatomy · 它由什么组成
Circle圆圈
18px，外圈 1.5px
Dot内点
选中时显示实心圆
Label文字
主标题 + 可选描述
Group分组
用 fieldset + legend 包裹
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 2–5 个互斥选项 | 用 |
| 所有选项都需要用户看到并比较 | 用 |
| 每个选项带描述文字 | 用 |
| 选项超过 7 个 | 不用 |
| 需要「不选」（可跳过） | 视情况 |
Radio 一旦选中就必须选一个。如果「跳过」是合法选项，请加一个「以上都不是」的单选项，或改用 Select。
选项超过 7 个请改用 Select Dropdown，否则页面会被撑得很长。
Similar Patterns
别搞混一句话区分：一排圆点，选中其中一个。选了一个，另一个自动取消。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一组单选按钮：个人 / 企业。每个选项下方有一行说明文字，整行可点，选中项内点变实心。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加几个圆点让用户选一个。
改成这样说
加 Radio 组（个人 / 企业）：用 fieldset+legend 包裹，每项整行可点并带说明文字，选项间 padding 12px，↑↓ 键可切换，必须有默认选中项。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。