Radio Groups
Radio groups are sets of options where exactly one can be chosen, and choosing one clears whatever was chosen before. The five here show how far the row stretches: a frequency list giving each option a sub-label and a description, a plan selector whose cards hold a badge, a feature list and a price with the billing period as a separate toggle, a settings screen with several independent single choices in labelled sections, a payment list marking the current default, and the option drawn as a card with an avatar and a trailing radio.
The behaviour people notice is the keyboard. A radio group is one tab stop rather than one per option, and the arrow keys move focus and the selection together inside it, which is why a group assembled out of plain buttons feels subtly broken to anyone not using a mouse. The other thing worth knowing is that radios have no route back to nothing. A choice can only be changed, never undone, unless you supplied a none-of-these option or a clear action.
Email frequency
Best for
Single-choice settings: a titled list where exactly one row can be on
Anatomy
Dark list header · radio rows with label, sub-label, badge, description · a link action · dashed dividers · drawer footer
Email frequency
Choose how often we email you. You can change this anytime.
Plan selector
Best for
Pricing and upgrade flows: one plan at a time, with the billing period as a toggle
Anatomy
Grey header with Content Label and Grouped Toggle · plan cards with radio, badge, feature list, price · stepper footer
Choose your plan
Switch or cancel anytime
Workspace defaults
Best for
Settings with several independent single choices: people, integrations, defaults
Anatomy
Dark list header · labelled sections · Radio Button Cards with avatar or logo, label, sub-label, badge, line · dashed dividers · drawer footer
Workspace defaults
Set the primary owner and default integration.
Primary contact
Choose the person to be in contact with
Default calendar
Choose your preferred Calendar
Payment methods
Best for
Choosing a default among saved items: cards, addresses, devices
Anatomy
Grey list header · radio rows with label, Current badge, line, provider mark · dashed dividers · two full-width footer actions
Payment methods
Choose the card we charge by default.
Radio card
Best for
One option as a card: a person, an account, a destination
Anatomy
Avatar with status badges · label, sub-label, badge · description · trailing radio · 24px corners · border/strong when selected
Using Radio Groups
Reach for it when
- A handful of options meant to be compared side by side before one is picked
- Plans or tiers, where the differences matter more than the names
- Picking a default among saved items: a card, an address, a shipping speed
- A survey question where exactly one answer is valid
Reach for something else when
- More options than fit on screen: a select or combobox scrolls, where a long radio list buries the footer
- Options that can all be true at once: checkboxes, since radios enforce a rule your data does not have
- A binary setting that applies immediately: a switch says so without making anyone read two labels
Where it shows up
Pricing plan selection
An upgrade screen where each plan is a card with its price and what it includes, and the billing period is a toggle above them, because period and plan are two choices rather than one list of four.
Default payment method
A list of saved cards with one marked current. The radio marks intent and the footer actions commit it, so nothing moves until the person confirms and a misclick cannot redirect a charge.
Notification frequency
A settings section asking how often a digest should arrive. Immediate, daily and weekly cannot all be true at once, so radios encode a rule that already exists in the data rather than imposing one.
Survey responses
A single-answer question whose options need a sentence each to be understood. A dropdown would hide those sentences behind an interaction; radios keep every option and its explanation on the page together.
Questions
When should a radio group be used instead of a dropdown select?
Use a radio group when the options are meant to be compared before one is chosen and there are few enough to sit on screen together. A select hides everything but the current value, which suits long familiar lists such as countries, and works against you when the differences between options, like price or limits or what is included, are the reason a choice is being made.
Should a radio group have an option selected by default?
Pre-select a default when one option is clearly safe and most people want it, since it saves a click and communicates the expected answer. Leave the group empty when the choice carries consequences the person should make deliberately, such as billing or data sharing, because a pre-selected option tends to be accepted without being read. If nothing is safe, mark the group required instead.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPRadio Groups
Radio groups are sets of options where exactly one can be chosen, and choosing one clears whatever was chosen before. The five here show how far the row stretches: a frequency list giving each option a sub-label and a description, a plan selector whose cards hold a badge, a feature list and a price with the billing period as a separate toggle, a settings screen with several independent single choices in labelled sections, a payment list marking the current default, and the option drawn as a card with an avatar and a trailing radio.
The behaviour people notice is the keyboard. A radio group is one tab stop rather than one per option, and the arrow keys move focus and the selection together inside it, which is why a group assembled out of plain buttons feels subtly broken to anyone not using a mouse. The other thing worth knowing is that radios have no route back to nothing. A choice can only be changed, never undone, unless you supplied a none-of-these option or a clear action.
Email frequency
Best for
Single-choice settings: a titled list where exactly one row can be on
Anatomy
Dark list header · radio rows with label, sub-label, badge, description · a link action · dashed dividers · drawer footer
Email frequency
Choose how often we email you. You can change this anytime.
Plan selector
Best for
Pricing and upgrade flows: one plan at a time, with the billing period as a toggle
Anatomy
Grey header with Content Label and Grouped Toggle · plan cards with radio, badge, feature list, price · stepper footer
Choose your plan
Switch or cancel anytime
Workspace defaults
Best for
Settings with several independent single choices: people, integrations, defaults
Anatomy
Dark list header · labelled sections · Radio Button Cards with avatar or logo, label, sub-label, badge, line · dashed dividers · drawer footer
Workspace defaults
Set the primary owner and default integration.
Primary contact
Choose the person to be in contact with
Default calendar
Choose your preferred Calendar
Payment methods
Best for
Choosing a default among saved items: cards, addresses, devices
Anatomy
Grey list header · radio rows with label, Current badge, line, provider mark · dashed dividers · two full-width footer actions
Payment methods
Choose the card we charge by default.
Radio card
Best for
One option as a card: a person, an account, a destination
Anatomy
Avatar with status badges · label, sub-label, badge · description · trailing radio · 24px corners · border/strong when selected
Using Radio Groups
Reach for it when
- A handful of options meant to be compared side by side before one is picked
- Plans or tiers, where the differences matter more than the names
- Picking a default among saved items: a card, an address, a shipping speed
- A survey question where exactly one answer is valid
Reach for something else when
- More options than fit on screen: a select or combobox scrolls, where a long radio list buries the footer
- Options that can all be true at once: checkboxes, since radios enforce a rule your data does not have
- A binary setting that applies immediately: a switch says so without making anyone read two labels
Where it shows up
Pricing plan selection
An upgrade screen where each plan is a card with its price and what it includes, and the billing period is a toggle above them, because period and plan are two choices rather than one list of four.
Default payment method
A list of saved cards with one marked current. The radio marks intent and the footer actions commit it, so nothing moves until the person confirms and a misclick cannot redirect a charge.
Notification frequency
A settings section asking how often a digest should arrive. Immediate, daily and weekly cannot all be true at once, so radios encode a rule that already exists in the data rather than imposing one.
Survey responses
A single-answer question whose options need a sentence each to be understood. A dropdown would hide those sentences behind an interaction; radios keep every option and its explanation on the page together.
Questions
When should a radio group be used instead of a dropdown select?
Use a radio group when the options are meant to be compared before one is chosen and there are few enough to sit on screen together. A select hides everything but the current value, which suits long familiar lists such as countries, and works against you when the differences between options, like price or limits or what is included, are the reason a choice is being made.
Should a radio group have an option selected by default?
Pre-select a default when one option is clearly safe and most people want it, since it saves a click and communicates the expected answer. Leave the group empty when the choice carries consequences the person should make deliberately, such as billing or data sharing, because a pre-selected option tends to be accepted without being read. If nothing is safe, mark the group required instead.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
