Radio
You might say
These options should be mutually exclusive—choosing one should clear the last one.
Choose exactly one option from a small setRadio buttons show mutually exclusive choices such as payment method or visibility. Give the group a clear question and keep all options visible. If there are many options or users need to search, a Select may work better.
When to use it
- Payment methodAllIn progressCompleted
- Visibility levelPublicMembers onlyPrivate
- Delivery speed
- Any short list with one valid answer
When NOT to use it
- Use it when several options may be selected
- Hide a long list of choices in a crowded group
- Use labels that do not explain the difference
- Offer no way to clear the choice when “none” is valid
Anatomy
Visible only
Make the whole row clickable, not just the control
A filled dot marks the selected option; choices in the same group are mutually exclusive
Make the outcome of each choice clear
Variants
Default
Use for a small set of mutually exclusive options
Button
Pay monthlyPay annually
For a short list that benefits from a more prominent control
With Desc
When each option needs supporting details, such as fees or delivery times
Disabled
When an unavailable option still needs to be shown
Typical use cases
Checkout
Select payment method¥ 658.00
Privacy setting
Complete personal information
Name
Gender
Birthday
Shipping choice
Who can see this update?
Plan selection
Shipping method
Send to: No. 100 Wensan Road, Xihu District, HangzhouModify
Further reading