Radio Button
UI ComponentsA circular input control used in groups where only one option can be selected at a time, with selecting one automatically deselecting others in the group.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Radio Button coming soon.
How It Works in Apps/Websites
Radio buttons enforce single selection within a group. They appear as circles that fill with a dot or highlight when selected. All radio buttons sharing the same 'name' attribute are mutually exclusive - selecting one automatically deselects the others. Best for 2-5 clearly visible options.
How AI Interprets This Term
When you say 'radio button', AI expects: a small circle (16-20px diameter), empty when unselected, filled with inner dot or solid fill when selected. Border is gray unselected, accent color when selected. Label text to the right. Grouped vertically or horizontally.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a radio button group for selecting shirt size
Design radio buttons for payment method: 3 options (Credit Card, PayPal, Bank Transfer) with icons. Unselected: gray circle border. Selected: blue (#3b82f6) filled circle with white center dot. Each option has label and description text. Vertical stack, 16px gap.
Show small inline radio buttons vs card-style radio buttons (full-width clickable cards)
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •2-5 mutually exclusive options
- •When all options should be visible
- •User needs to compare options
- •Form fields requiring single choice
When NOT to Use
- •Multiple selections allowed (use checkbox)
- •Many options (use dropdown)
- •On/off toggle (use switch)
Related Terms
Checkbox
A small square box that can be toggled between checked and unchecked states, used for selecting multiple options from a list or confirming a single choice.
Dropdown
An interactive element that reveals a list of options when clicked, allowing users to select one or more items from a collapsed menu.