- Guidelines
- React API Reference
- Blazor API Reference
Radio groups allow users to select exactly one option from a set of mutually exclusive choices, providing a clear and intuitive way to handle single-selection scenarios.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use for mutually exclusive options where only one selection is allowed. Ideal for 2-7 options that users need to compare. |
| Content | Use clear, concise labels for each option. Group related choices logically and provide descriptive group labels when needed. |
| Behavior | Always have one option selected by default when possible. Provide immediate visual feedback for selection changes. |
| States | Clearly indicate selected, unselected, disabled, and focused states. Ensure states are distinguishable across different accessibility needs. |
| Feedback | Use consistent visual indicators (filled circles) for selections. Provide clear focus indicators for keyboard navigation. |
| Examples | Payment methods, shipping options, account types, notification preferences, or any scenario requiring exactly one choice. |
Best Practices
- Logical Grouping: Group related options together with clear labels and appropriate spacing.
- Default Selection: Pre-select the most common or recommended option when appropriate.
- Clear Labels: Use descriptive, scannable labels that clearly differentiate between options.
- Consistent Layout: Maintain consistent spacing and alignment between radio buttons and labels.
- Keyboard Navigation: Support arrow key navigation between options within the group.
- Accessible Design: Provide proper ARIA attributes and ensure adequate color contrast.
Do’s and Don’ts
Do
- Use for mutually exclusive choices (only one selection allowed).
- Provide clear, descriptive labels for each option.
- Pre-select a default option when it makes sense.
- Keep the number of options manageable (2-7 typically).
Don't
- Use for multiple selections (use checkboxes instead).
- Leave all options unselected when a choice is required.
- Use overly long labels that are hard to scan.
- Mix radio groups with other input types in confusing ways.
Additional Guidance
- Psychological Impact:
- Decision Clarity: Radio groups make it clear that only one option can be selected, reducing decision complexity.
- Comparison Facilitation: Seeing all options at once helps users make informed comparisons.
- Confidence Building: Clear visual feedback for selections builds user confidence in their choices.