Radio Button
单选按钮
A row of circles where picking one clears the others — one choice, immediately visible.
Live Demo
Actually clickableWhat you just saw:The two circles for "Personal / Business" on a sign-in page, the round options in a photo-size picker, the circles in front of each payment method.
What it actually is
The value of a radio button is mutual exclusivity. It is faster than a select dropdown because every option is visible and scannable in one pass, but it costs vertical space. With fewer than 5 options it is usually better than a select.
Anatomy · What it's made of
Circle圆圈
18px with a 1.5px outer ring
Dot内点
A filled circle appears when selected
Label文字
A heading plus an optional description
Group分组
Wrapped in a fieldset + legend
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| There are 2–5 mutually exclusive options | Yes |
| The user needs to see and compare all the options | Yes |
| Each option carries a line of descriptive text | Yes |
| There are more than 7 options | No |
| The user needs to be able to choose "none" | Depends |
Once a radio option is selected, one of them is always selected. If skipping is legitimate, add a "None of the above" option or switch to a select.
Past 7 options, use a select dropdown instead — otherwise the page grows very long.
Similar Patterns
Don't mix these upRadio ButtonCurrent
单选按钮
A row of circles where picking one clears the others — one choice, immediately visible.
Checkbox
复选框
A small square the user can tick, for picking any number of several independent options at once.
In one line:A row of circles where picking one clears the others — one choice, immediately visible.
Checkbox
复选框
A small square the user can tick, for picking any number of several independent options at once.
Switch
开关
A control that slides left and right, on or off, with the state always plainly visible.
Segmented Control
分段控件
A row of small buttons packed shoulder to shoulder, one of them selected, so the control looks "segmented".
Select
下拉选择器
A box that opens downward into a list of options and collapses again once you pick one.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a group of radio buttons: Personal / Business. Each option has a line of description beneath it, the whole row is tappable, and the dot fills in when selected.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a few circles and let the user pick one.
Say this instead
Add a Radio group (Personal / Business): wrapped in fieldset+legend, each option tappable across the full row with descriptive text, 12px padding between options, ↑↓ to move between them, and a default selection already made.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.