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.
You can say this to an AI Agent
Show the four pickup slots as one visible radio group with exactly one choice. Verify clicking labels, keyboard changes, and selecting a new slot clearing the previous one.
When to use it
- Payment methodAllIn progressCompleted
- Visibility levelPublicMembers onlyPrivate
- Delivery speedStandard delivery Free · about 3 daysExpress delivery ¥8 · arrives tomorrow
- Any short list with one valid answerAlipayWeChat PayBank card
When NOT to use it
- Use it when several options may be selectedBeijingShanghaiGuangzhouShenzhenHangzhouChengduWuhanXi’an…Too many options are hard to compare quickly
- Hide a long list of choices in a crowded groupI have read and agree to the Terms of ServiceOne option doesn’t need a radio group
- Use labels that do not explain the differenceFrontendBackendDesignUse checkboxes when more than one option can be selected
- Offer no way to clear the choice when “none” is validMaleFemaleA selected radio button can’t be cleared
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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check