Skip to main content

Accessible Design System v1

Type to filter components by name, description, or keywords

Radio Buttons

Accessible radio button groups using fieldset and legend for proper grouping. Radio buttons allow users to select exactly one option from a set of choices.

Preferred contact method
Choose how we should contact you

HTML

<fieldset class="ads-radio-fieldset">
    <legend>Preferred contact method</legend>
    <div id="contact-helper" class="ads-helper-text">
        Choose how we should contact you
    </div>
    
    <div class="ads-radio-group">
        <div class="ads-radio-wrapper">
            <input type="radio" id="email" name="contact" class="ads-radio" value="email">
            <label for="email" class="ads-radio-label">Email</label>
        </div>
        
        <div class="ads-radio-wrapper">
            <input type="radio" id="phone" name="contact" class="ads-radio" value="phone">
            <label for="phone" class="ads-radio-label">Phone</label>
        </div>
        
        <div class="ads-radio-wrapper">
            <input type="radio" id="text" name="contact" class="ads-radio" value="text">
            <label for="text" class="ads-radio-label">Text message</label>
        </div>
    </div>
</fieldset>

CSS

.ads-radio-fieldset {
    border: 1px solid var(--ads-border-color);
    padding: 1.5rem;
    border-radius: 4px;
}

.ads-radio-fieldset legend {
    font-weight: 500;
    font-size: 16px;
    padding: 0 0.5rem;
}

.ads-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ads-radio-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ads-radio {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    cursor: pointer;
}

.ads-radio:focus {
    outline: 3px solid var(--ads-focus-outline);
    outline-offset: 2px;
}

.ads-radio-label {
    cursor: pointer;
    font-size: 16px;
}

Accessibility Guidelines

Key Requirements

  • Always use fieldset and legend: Groups related radio buttons and provides accessible name for the group
  • Same name attribute: All radio buttons in a group must share the same name attribute
  • Unique IDs: Each radio button needs a unique id that matches its label's for attribute
  • Keyboard navigation: Arrow keys move between options, Space selects
  • Visual grouping: Border around fieldset visually indicates related choices

Custom Implementation Notes

Radio vs Checkbox: Use radio buttons when users must select exactly one option from a set. Use checkboxes when users can select zero, one, or multiple options. A common mistake is using checkboxes when radio buttons are more appropriate.

Default selection: Consider providing a default selected option if one choice is most common. This helps users complete forms faster. However, for sensitive questions, no default selection may be more appropriate to ensure intentional choices.

Number of options: Radio buttons work best for 2-7 options. For more options, consider a select dropdown. For only two options where one is clearly the opposite of the other (Yes/No, On/Off), a single checkbox may be more appropriate.

How to Test for Accessibility

  1. Screen Reader Test:
    • Tab to the radio group
    • Verify legend is announced: "Preferred contact method"
    • Verify helper text is announced
    • Use arrow keys - verify each option and its state is announced
  2. Keyboard Navigation:
    • Tab to first radio button in group
    • Use arrow keys to move between options
    • Press Space to select an option
    • Verify only one option can be selected at a time
  3. Visual Test:
    • Verify fieldset border creates clear visual grouping
    • Check focus indicator is visible on keyboard navigation
    • Verify labels are clickable to select options

References