Skip to main content

Accessible Design System v1

Type to filter components by name, description, or keywords

Checkboxes Overview

Accessible checkbox components for allowing users to select zero, one, or multiple options. Includes single checkboxes and checkbox groups.

Available Checkbox Components

Single Checkbox

Single opt-in checkbox for terms acceptance or newsletter subscriptions

Checkbox Group

Checkbox group with "select all" functionality using fieldset and legend

Basic Checkbox Example

Select your preferences
Choose any options that apply

HTML

<fieldset class="ads-checkbox-fieldset">
    <legend>Select your preferences</legend>
    <div id="prefs-helper" class="ads-helper-text">
        Choose any options that apply
    </div>
    
    <div class="ads-checkbox-group">
        <div class="ads-checkbox-wrapper">
            <input type="checkbox" id="email" class="ads-checkbox">
            <label for="email" class="ads-checkbox-label">
                Email notifications
            </label>
        </div>
        
        <div class="ads-checkbox-wrapper">
            <input type="checkbox" id="sms" class="ads-checkbox">
            <label for="sms" class="ads-checkbox-label">
                SMS notifications
            </label>
        </div>
    </div>
</fieldset>

CSS

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

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

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

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

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

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

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

Accessibility Guidelines

Key Requirements

  • Use fieldset and legend: For groups of checkboxes, wrap in fieldset with descriptive legend
  • Unique IDs: Each checkbox must have unique id matching its label's for attribute
  • Clickable labels: Labels should be clickable to toggle the checkbox
  • Keyboard accessible: Space bar toggles checked state, Tab moves between checkboxes
  • Visual grouping: Related checkboxes should be visually grouped together

When to Use Checkboxes

  • Multiple selections: Users can select zero, one, or multiple options
  • Independent choices: Each option is independent of others
  • Binary settings: Single checkbox for on/off or yes/no choices
  • Optional features: Selecting features, preferences, or filters

Checkbox vs Radio Button

Use checkboxes when: Users can select multiple options or when the selection is optional (can select zero options).

Use radio buttons when: Users must select exactly one option from a set of choices.

How to Test for Accessibility

  1. Screen Reader Test:
    • Tab to checkbox group
    • Verify legend is announced first
    • Verify each checkbox announces label and checked state
  2. Keyboard Navigation:
    • Tab to each checkbox in order
    • Press Space to toggle checked state
    • Verify focus indicator is visible
  3. Mouse/Touch Test:
    • Click checkbox itself to toggle
    • Click label text to toggle
    • Verify both methods work

References