Radio button usage

Radio buttons are often confused with checkboxes, but they serve a different purpose. A checkbox allows multiple selections, while radio buttons enforce exclusivity: the user can choose only one option from a group.

Used correctly, radio buttons reduce errors and make decisions clear. Misused, they frustrate users and create uncertainty.

Guidelines for designing and implementing radio buttons.

Use radio buttons for mutually exclusive options

Ideal when only one selection is valid (for example: choosing a shipping method). Do not use checkboxes in this case.

References:

• Radio button accessibility – WebAIM
• Designing interfaces – Jenifer Tidwell

Provide clear group labels

A group of radio buttons must have a descriptive label (using <fieldset> and <legend> or ARIA equivalents). Without it, users may not know the question being asked.

References:

• WCAG 3.3.2: Labels or instructions
• Grouping controls – W3C WAI

Set a sensible default when possible

Preselect the most common or safe option to reduce cognitive load, but always allow users to change it.

References:

• Designing with the mind in mind – Jeff Johnson

Arrange options vertically for scanability

Vertical layout improves readability, especially for long labels or multiple options. Use horizontal layout only for short, related items (for example: Yes/No).

References:

• Form usability guidelines – Nielsen Norman Group

Ensure accessibility states

Radio buttons must be keyboard navigable, and screen readers should announce the group, option, and selection state.

References:

• ARIA Authoring Practices – W3C
• Inclusive Components – Heydon Pickering

Frequent mistakes when using radio buttons.

Using radio buttons when multiple selections are possible

This misleads users and forces them to choose only one, even when more may be valid.

Not grouping radio buttons properly

Without grouping, screen readers cannot announce the context of the choices.

Providing too many options without structure

Long, ungrouped lists overwhelm users and make scanning difficult.

Placing options horizontally with long labels

Creates readability problems and forces unnecessary eye movement.

Key takeaways for radio buttons.

• Use radio buttons only for mutually exclusive choices.
• Always provide a clear group label with <fieldset> and <legend>.
• Preselect a default if it reduces effort, but keep it user-changeable.
• Arrange options vertically unless labels are very short.
• Support accessibility with proper grouping and ARIA states.

Radio buttons make exclusive choices clear and efficient. Misused, they confuse, mislead, and create accessibility barriers.

Scenario: Plan or option selection

Use when the user must choose exactly one option from a set: pricing plans, delivery methods, account types, or payment options.

You are a UX-focused design agent. Design a radio button group for [use case: pricing plan selection / delivery method / account type / payment option].

Rules:
- Use radio buttons when exactly one option must be selected (mutually exclusive)
  Use checkboxes for multiple selections, select dropdown for 7+ options
- Required group structure:
  

    
Choose your delivery method
    
    Standard (3–5 days, free)
  
- Layout: vertical (one per line) for most cases
  Horizontal: only for 2–3 very short labels ("Yes / No")
- Default selection:
  ✓ Pre-select the most common / recommended option when risk is low
  ✗ Never pre-select when any option has significant cost or privacy implications
- Card-style radio buttons (for rich content like pricing plans):
  Entire card is the clickable area
  Selected card: prominent border, background change, or check indicator
  Keyboard operable, aria-checked reflects state
- Touch target: minimum 44×44px — clicking the label must toggle the radio
- Disabled options: show with explanation — "Overnight — not available for your location"
  Never hide unavailable options

Accessibility:
- Tab moves into group, Arrow keys move between options, Tab exits group
- Announced: "[Option], radio button, [N] of [total], [group legend]"

Constraints:
- Never use radio buttons for multiple selections
- Never omit fieldset and legend
- Never use radio buttons for more than 7 options