Prefer radio buttons for a small set of options that benefits from comparison.
Problem
The user needs to choose one option.
Use radio buttons when
- There are a few meaningful choices and users need to see their differences.
- Each option needs a short explanation, such as delivery speed and price.
Use a select or autocomplete when
- A long list that would overwhelm the page; consider a native select.
- Hundreds of choices: narrow the list first, or consider an accessible autocomplete when users know what to search for.
Example
Both options stay visible for comparison. This demo does not place an order.
Implementation
- Use native radio inputs with the same name for each group, inside a fieldset with a short legend.
- Give each option a clickable label. Associate separate hints with aria-describedby, and give a select its own visible label.
- Avoid preselecting an unanswered question when it could bias the answer. Preserve existing choices; settings may have a sensible default.
- If “None” or “No preference” is valid, include it: users cannot clear a selected radio by clicking it again.
- For an unanswered select, start with an empty-value prompt option. Use required when an answer is mandatory.
Tradeoffs
Radio buttons use more room but make alternatives visible. Selects are compact and familiar but hide choices until opened. There is no universal option-count cutoff.
Verification
Can users understand and compare the choices without opening and closing a menu repeatedly?