Skip to main content

Accessible Design System v1

Type to filter components by name, description, or keywords

Single Opt-in Checkbox

Accessible single checkbox for opt-in choices like terms and conditions acceptance or newsletter subscriptions.

HTML

<div class="ads-checkbox-wrapper">
    <input type="checkbox" id="terms" class="ads-checkbox">
    <label for="terms" class="ads-checkbox-label">
        I agree to the <a href="/terms">terms and conditions</a>
    </label>
</div>

CSS

.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;
}