Product Email Content Brand
Product Email Content Brand

Checkbox

A checkable input that visually shows if an option is true or false.

Base style

<!-- Base -->
<fieldset>
    <div class="grid gs8">
        <div class="grid--cell">
            <input class="s-checkbox" type="checkbox" name="example-name" id="example-item" />
        </div>
        <label class="grid--cell s-label fw-normal" for="example-item">Checkbox Label</label>
    </div>
</fieldset>

<!-- Disabled -->
<fieldset class="mt8">
    <div class="grid gs8 is-disabled">
        <div class="grid--cell">
            <input class="s-checkbox" type="checkbox" name="example-disabled" id="example-item-disabled" disabled />
        </div>
        <label class="grid--cell s-label fw-normal" for="example-item-disabled">Checkbox Label</label>
    </div>
</fieldset>

Accessibility

The best accessibility is semantic HTML. Most screen readers understand how to parse inputs if they’re correctly formatted. When it comes to checkboxes, there are a few things to keep in mind:

  • All inputs should have an id attribute.
  • Be sure to associate the checkbox label by using the for attribute. The value here is the input’s id.
  • If you have a group of related checkboxes, use the fieldset and legend to group them together.

For more information, please read Gov.UK’s article, "Using the fieldset and legend elements".

Examples

Vertical group

<fieldset class="grid gs8 gsy fd-column">
    <legend class="grid--cell s-label">Which types of fruit do you like? <span class="ml4 fw-normal fc-light">(Check all that apply)</span></legend>
    <div class="grid--cell">
        <div class="grid gs8 gsx">
            <div class="grid--cell">
                <input class="s-checkbox" type="checkbox" name="" id="choice-vert-checkbox-1" />
            </div>
            <label class="grid--cell s-label fw-normal" for="choice-vert-checkbox-1">Apples</label>
        </div>
    </div>
    <div class="grid--cell">
        <div class="grid gs8 gsx">
            <div class="grid--cell">
                <input class="s-checkbox" type="checkbox" name="" id="choice-vert-checkbox-2" />
            </div>
            <label class="grid--cell s-label fw-normal" for="choice-vert-checkbox-2">Oranges</label>
        </div>
    </div>
    <div class="grid--cell">
        <div class="grid gs8 gsx">
            <div class="grid--cell">
                <input class="s-checkbox" type="checkbox" name="" id="choice-vert-checkbox-3" />
            </div>
            <label class="grid--cell s-label fw-normal" for="choice-vert-checkbox-3">Bananas</label>
        </div>
    </div>
</fieldset>
Which types of fruit do you like? (Check all that apply)

Horizontal group

<fieldset class="grid gs8 gsy fd-column">
    <legend class="grid--cell s-label">Which types of fruit do you like? <span class="ml4 fw-normal fc-light">(Check all that apply)</span></legend>
    <div class="grid--cell">
        <div class="grid gs16">
            <div class="grid--cell">
                <div class="grid gs8 gsx">
                    <div class="grid--cell">
                        <input class="s-checkbox" type="checkbox" name="" id="choice-horz-checkbox-1" />
                    </div>
                    <label class="grid--cell s-label fw-normal" for="choice-horz-checkbox-1">Apples</label>
                </div>
            </div>
            <div class="grid--cell">
                <div class="grid gs8 gsx">
                    <div class="grid--cell">
                        <input class="s-checkbox" type="checkbox" name="" id="choice-horz-checkbox-2" />
                    </div>
                    <label class="grid--cell s-label fw-normal" for="choice-horz-checkbox-2">Oranges</label>
                </div>
            </div>
            <div class="grid--cell">
                <div class="grid gs8 gsx">
                    <div class="grid--cell">
                        <input class="s-checkbox" type="checkbox" name="" id="choice-horz-checkbox-3" />
                    </div>
                    <label class="grid--cell s-label fw-normal" for="choice-horz-checkbox-3">Bananas</label>
                </div>
            </div>
        </div>
    </div>
</fieldset>
Which types of fruit do you like? (Check all that apply)

With description copy

<fieldset class="grid gs8 gsy fd-column">
    <legend class="grid--cell s-label">Which types of fruit do you like? <span class="ml4 fw-normal fc-light">(Check all that apply)</span></legend>
    <div class="grid--cell">
        <div class="grid gs8 gsx">
            <div class="grid--cell">
                <input class="s-checkbox" type="checkbox" name="" id="choice-copy-checkbox-1" />
            </div>
            <div class="grid--cell">
                <label class="d-block mb4 s-label fw-normal" for="choice-copy-checkbox-1">
                    Apples
                    <p class="s-description">A sweet, edible fruit produced by an apple tree (Malus pumila).</p>
                </label>
            </div>
        </div>
    </div>
    <div class="grid--cell">
        <div class="grid gs8 gsx">
            <div class="grid--cell">
                <input class="s-checkbox" type="checkbox" name="" id="choice-copy-checkbox-2" />
            </div>
            <div class="grid--cell">
                <label class="d-block mb4 s-label fw-normal" for="choice-copy-checkbox-2">
                    Oranges
                    <p class="s-description">A fruit of the citrus species Citrus × sinensis in the family Rutaceae.</p>
                </label>
            </div>
        </div>
    </div>
    <div class="grid--cell">
        <div class="grid gs8 gsx">
            <div class="grid--cell">
                <input class="s-checkbox" type="checkbox" name="" id="choice-copy-checkbox-3" />
            </div>
            <div class="grid--cell">
                <label class="d-block mb4 s-label fw-normal" for="choice-copy-checkbox-3">
                    Bananas
                    <p class="s-description">A fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants in the genus Musa.</p>
                </label>
            </div>
        </div>
    </div>
</fieldset>
Which types of fruit do you like? (Check all that apply)

Validation states

Checkboxes use the same validation states as inputs.

Validation classes

Class Applies Description
.has-warning Parent wrapper for checkbox and label Used to warn users that the value they’ve entered has a potential problem, but it doesn’t block them from proceeding.
.has-error Parent wrapper for checkbox and label Used to alert users that the value they’ve entered is incorrect, not filled in, or has a problem which will block them from proceeding.
.has-success Parent wrapper for checkbox and label Used to notify users that the value they’ve entered is fine or has been submitted successfully.

Validation examples

<fieldset class="grid gs8 gsy fd-column">
    <legend class="grid--cell s-label">Which types of fruit do you like? <span class="ml4 fw-normal fc-light">(Check all that apply)</span></legend>
    <div class="grid--cell">
        <div class="grid gs8 gsx has-warning">
            <div class="grid--cell">
                <input class="s-checkbox" type="checkbox" name="" id="choice-valid-checkbox-1" />
            </div>
            <div class="grid--cell">
                <label class="d-block mb4 s-label fw-normal" for="choice-valid-checkbox-1">
                    Apples
                    <p class="s-input-message"><strong>Note:</strong> Apples are currently not in season.</p>
                </label>
            </div>
        </div>
    </div>
    <div class="grid--cell">
        <div class="grid gs8 gsx has-error">
            <div class="grid--cell">
                <input class="s-checkbox" type="checkbox" name="" id="choice-valid-checkbox-2" />
            </div>
            <div class="grid--cell">
                <label class="d-block mb4 s-label fw-normal" for="choice-valid-checkbox-2">
                    Oranges
                    <p class="s-input-message">All oranges are currently <strong>out of stock</strong>.</p>
                </label>
            </div>
        </div>
    </div>
    <div class="grid--cell">
        <div class="grid gs8 gsx has-success">
            <div class="grid--cell">
                <input class="s-checkbox" type="checkbox" name="" id="choice-valid-checkbox-3" />
            </div>
            <div class="grid--cell">
                <label class="d-block mb4 s-label fw-normal" for="choice-valid-checkbox-3">
                    Bananas
                    <p class="s-input-message">You’ve successfully selected the most amazing fruit in the world.</p>
                </label>
            </div>
        </div>
    </div>
</fieldset>
Which types of fruit do you like? (Check all that apply)