Sections

Checkbox

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

Base style

Section titled 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

Section titled 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

Section titled Examples

Vertical group

Section titled 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

Section titled 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

Section titled 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

Section titled Validation states

Checkboxes use the same validation states as inputs.

Validation classes

Section titled 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

Section titled 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)
Edit on GitHub