Radio Button
A control for choosing exactly one option from a visible, mutually exclusive set.
UI ComponentsRadio buttons show every option at once and allow exactly one. That visibility is the reason to choose them over a dropdown: comparing three plans is a glance rather than two clicks and a memory test. The practical range is two to about five options; past that the group dominates the layout and a select does the job with less space.
A radio group needs a group label, not just labels on each option, or the question itself goes unasked — “Monthly / Annual” without “Billing period” above it is a guess. Arrow keys must move between options and the group must take a single tab stop. And a radio group with no default is a deliberate choice: fine when the answer matters and a wrong default would be quietly costly, unhelpful when one option is obviously right for most people.
In practice
A subscription page hid the billing period in a select. Annual, discounted 20%, was chosen by 11% of new customers. Moving the same two options to radio buttons showing both prices side by side took annual to 34% — the discount had always been there, it was just one click out of sight.
Where teams get it wrong
- A radio group with no group label, so the question is implied rather than asked.
- More than about five options, where a dropdown or combobox is less overwhelming.
- No way to clear a selection when “neither” is a legitimate answer — add an explicit option.
- Radio buttons that apply immediately in a form that also has a Save button.
- Custom implementations that break arrow-key navigation within the group.
Learn more
You may ask
Frequently Asked Questions
When should you use radio buttons instead of a dropdown?
When there are five or fewer options and seeing them all helps the decision — pricing plans, delivery speeds, account types. A dropdown hides the comparison behind a click, which costs conversions on exactly those screens.
Should a radio group have a default selected?
Default when one option suits most people and a wrong guess is cheap. Leave it empty when the choice has real consequences and you would rather the person answer than accept whatever was pre-selected.
Related terms
All terms- CheckboxA control for independent on/off choices, any number of which can be selected at once — including none.
- Dropdown (UI)A control that reveals a list on demand — either for selecting a value or for offering a menu of actions.
- Segmented ControlA small row of mutually exclusive options that switches how a view is shown, not what it contains.
- Form DesignDesigning the fields, sequence, validation and error handling of a form so people can finish it without stopping to think.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us