Radio group
Use it when: Users must choose exactly one option.
Make this state clear: Exactly one selected option state.
Observe the result: Exactly one option is selected at a time and labels are clickable.
Study the full pattern →Radio group vs Select
Use radio groups when users must choose one option from a short meaningful list. Use select when the list is longer or the choice is secondary enough to collapse.
Learn the decision
Match the interaction to the person's task
Use radio groups when users must choose one option from a short meaningful list. Use select when the list is longer or the choice is secondary enough to collapse.
Practice the judgment: Imagine this situation: Making users open a select repeatedly to compare a short list. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →Workbench Context
- Selected
- Shortlist
- User job
- Search
- Mode
- Category
- Platform
- Maturity
- Risk
- Recovery
- Urgency
- Confidence
- Interruption
Decision dimensions
| Dimension | Radio group | Select |
|---|---|---|
| UI or UX | UI + UX - Single-choice form control | UI + UX - Single-choice dropdown control |
| UI guidance | Render a fieldset/legend with visible native radio options, selected state, focus state, optional hints, and group-level validation. | Render a persistent label, hint text, native closed value, finite option list, selected option, and validation state. |
| UX guidance | Help the person reach a clear task outcome. | Help the person reach a clear task outcome. |
| Good UI | Visible native radio options with a clear legend, selected state, focus state, and helper text. | Persistent label, hint text, visible selected value, readable options, and clear required validation state. |
| Bad UI | Allowing several options in the group to appear active at once. | Placeholder as the only label. |
| Good UX | Exactly one option is selected at a time and labels are clickable. | Users can open, scan, choose one value, and review the selected value after close. |
| Bad UX | Using radios for choices where multiple selections are allowed. | Hiding two obvious critical choices in a dropdown. |
| Best fit | Users must choose exactly one option. | The user chooses one option from a moderate known list. |
| Avoid when | Users can choose multiple options. | The option set is short and comparison matters. |
| Required state | Exactly one selected option state. | Closed state with empty option or current selected value. |
| Accessibility burden | Use a programmatic group label through fieldset/legend or an accessible radiogroup name. | Prefer native semantics or implement equivalent name, role, state, and keyboard behavior. |
| Common misuse | Using radios for independent choices where several answers can be true. | Using select to hide two or three obvious choices that should be compared. |
Radio group
- UI or UX
- UI + UX - Single-choice form control
- UI guidance
- Render a fieldset/legend with visible native radio options, selected state, focus state, optional hints, and group-level validation.
- UX guidance
- Help the person reach a clear task outcome.
- Good UI
- Visible native radio options with a clear legend, selected state, focus state, and helper text.
- Bad UI
- Allowing several options in the group to appear active at once.
- Good UX
- Exactly one option is selected at a time and labels are clickable.
- Bad UX
- Using radios for choices where multiple selections are allowed.
- Best fit
- Users must choose exactly one option.
- Avoid when
- Users can choose multiple options.
- Required state
- Exactly one selected option state.
- Accessibility burden
- Use a programmatic group label through fieldset/legend or an accessible radiogroup name.
- Common misuse
- Using radios for independent choices where several answers can be true.
Select
- UI or UX
- UI + UX - Single-choice dropdown control
- UI guidance
- Render a persistent label, hint text, native closed value, finite option list, selected option, and validation state.
- UX guidance
- Help the person reach a clear task outcome.
- Good UI
- Persistent label, hint text, visible selected value, readable options, and clear required validation state.
- Bad UI
- Placeholder as the only label.
- Good UX
- Users can open, scan, choose one value, and review the selected value after close.
- Bad UX
- Hiding two obvious critical choices in a dropdown.
- Best fit
- The user chooses one option from a moderate known list.
- Avoid when
- The option set is short and comparison matters.
- Required state
- Closed state with empty option or current selected value.
- Accessibility burden
- Prefer native semantics or implement equivalent name, role, state, and keyboard behavior.
- Common misuse
- Using select to hide two or three obvious choices that should be compared.
Decision rules
- Prefer radio groups when a short mutually exclusive set should stay visible for comparison before the user commits.
- Prefer select when the known list is roughly seven to 15 options, familiar, or secondary enough that one extra open-and-scan step is acceptable.
- Do not use select to hide a critical short decision just to save vertical space; the extra click makes comparison and error recovery worse.
Inspect live examples
Failure modes
- Making users open a select repeatedly to compare a short list.
- Rendering custom selects without native or APG-equivalent keyboard behavior.