Checkbox

Checkable inputs that visually allow for multiple options or true/false values.

Classes

Class	Description	Parent	Modifies
`.s-checkbox`	Base checkbox style.	N/A	N/A
`.s-checkbox__checkmark`	Checkmark style.	`.s-checkbox`	N/A

Base

Use the .s-checkbox to wrap input[type="checkbox"] elements to apply checkbox styles.

<div class="s-checkbox">
    <input type="checkbox" name="example-name" id="example-item" />
    <label class="s-label" for="example-item">Check Label</label>
</div>

Example	Description
Checkbox label	Unchecked checkbox.
Checkbox label	Disabled unchecked checkbox.
Checkbox label	Checked checkbox.
Checkbox label	Disabled checked checkbox.

Checkmark

The checkmark style is an alternative to the base checkbox style. To use the checkmark style, wrap your input and label in a container with the .s-checkbox__checkmark class.

<label class="s-checkbox s-checkbox__checkmark" for="example-item">
    Checkmark Label
    <input type="checkbox" name="example-name" id="example-item" />
</label>

Example	Class	Description
Checkmark label	`.s-checkbox__checkmark`	The checkmark, unchecked state.
Checkmark label	`.s-checkbox__checkmark`	Disabled, unchecked state.
Checkmark label	`.s-checkbox__checkmark`	The checkmark, checked state.
Checkmark label	`.s-checkbox__checkmark`	Disabled, checked state.

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”.

Checkbox group

Vertical group

<fieldset class="s-form-group">
    <legend class="s-label">…</legend>
    <div class="s-checkbox">
        <input type="checkbox" name="…" id="vert-checkbox-1" />
        <label class="s-label" for="vert-checkbox-1">…</label>
    </div>
    <div class="s-checkbox">
        <input type="checkbox" name="…" id="vert-checkbox-2" />
        <label class="s-label" for="vert-checkbox-2">…</label>
    </div>
    <div class="s-checkbox">
        <input type="checkbox" name="…" id="vert-checkbox-3" />
        <label class="s-label" for="vert-checkbox-3">…</label>
    </div>
</fieldset>

Which types of fruit do you like? (Check all that apply)

Apples

Oranges

Bananas

Horizontal group

<fieldset class="s-form-group s-form-group__horizontal">
    <legend class="s-label">…</legend>
    <div class="s-checkbox">
        <input type="checkbox" name="…" id="hori-checkbox-1" />
        <label class="s-label" for="hori-checkbox-1">…</label>
    </div>
    <div class="s-checkbox">
        <input type="checkbox" name="…" id="hori-checkbox-2" />
        <label class="s-label" for="hori-checkbox-2">…</label>
    </div>
    <div class="s-checkbox">
        <input type="checkbox" name="…" id="hori-checkbox-3" />
        <label class="s-label" for="hori-checkbox-3">…</label>
    </div>
</fieldset>

Which types of fruit do you like? (Check all that apply)

Apples

Oranges

Bananas

With description copy

<fieldset class="s-form-group">
    <legend class="s-label">…</legend>
    <div class="s-checkbox">
        <input type="checkbox" name="…" id="desc-checkbox-1" />
        <label class="s-label" for="desc-checkbox-1">
            …
            <p class="s-description">…</p>
        </label>
    </div>
    …
</fieldset>

Which types of fruit do you like? (Check all that apply)

Apples

Fresh red apples.

Oranges

Juicy and sweet oranges.

Bananas

Ripe yellow bananas.

Validation states

Checkboxes use the same validation states as inputs.

Validation classes

Class	Description	Applies to
`.has-warning`	Used to warn users that the value they've entered has a potential problem, but it doesn't block them from proceeding.	Parent element
`.has-error`	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.	Parent element
`.has-success`	Used to notify users that the value they've entered is fine or has been submitted successfully.	Parent element

Validation examples

<!-- Checkbox w/ warning -->
<div class="s-checkbox has-warning">
    <input type="checkbox" name="…" id="warn-checkbox-1" />
    <label class="s-label" for="warn-checkbox-1">
        …
        <p class="s-description">…</p>
    </label>
</div>

Which types of fruit do you like? (Check all that apply)

Apples

Fresh red apples.

Oranges

Juicy and sweet oranges.

Bananas

Ripe yellow bananas.

Indeterminate state

Checkboxes can be styled by using the :indeterminate pseudo class.

Note: The :indeterminate pseudo class can only be set via JavaScript. Use the HTMLInputElement object's indeterminate property to set the state.

<fieldset class="s-form-group">
    <div class="s-checkbox">
        <input type="checkbox" name="" id="indeterminate-checkbox-1" />
        <label class="s-label" for="indeterminate-checkbox-1">Select all</label>
    </div>
</fieldset>

<script>
    document.getElementById("indeterminate-checkbox-1").indeterminate = true;
</script>

Select all