Skip to main content

Accessible Design System v1

Type to filter components by name, description, or keywords

Checkbox Group with Select All

Accessible checkbox group with "select all" functionality using proper ARIA attributes for grouping and state management.

Select your interests
Choose all that apply

HTML

<fieldset class="ads-checkbox-fieldset">
    <legend>Select your interests</legend>
    <div id="interests-helper" class="ads-helper-text">Choose all that apply</div>
    
    <div class="ads-checkbox-wrapper">
        <input type="checkbox" id="select-all" class="ads-checkbox">
        <label for="select-all" class="ads-checkbox-label">Select all</label>
    </div>
    
    <div class="ads-checkbox-wrapper">
        <input type="checkbox" id="tech" class="ads-checkbox interest-option">
        <label for="tech" class="ads-checkbox-label">Technology</label>
    </div>
    <!-- More checkboxes... -->
</fieldset>

JavaScript

const selectAll = document.getElementById('select-all');
const checkboxes = document.querySelectorAll('.interest-option');

selectAll.addEventListener('change', function() {
    checkboxes.forEach(cb => cb.checked = this.checked);
});

checkboxes.forEach(cb => {
    cb.addEventListener('change', function() {
        selectAll.checked = [...checkboxes].every(c => c.checked);
    });
});