Skip to main content
Sections

Checkbox

Svelte Figma

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

Base

Section titled 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
Unchecked checkbox.
Disabled unchecked checkbox.
Checked checkbox.
Disabled checked checkbox.

Checkmark

Section titled 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
.s-checkbox__checkmark Unchecked checkmark with a checkbox element.
.s-checkbox__checkmark Disabled unchecked checkmark with a checkbox element.
.s-checkbox__checkmark Checked checkmark with a checkbox element.
.s-checkbox__checkmark Disabled checked checkmark with a checkbox element.

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

Checkbox group

Section titled Checkbox group

Vertical group

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

Horizontal group

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

With description copy

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

Validation states

Section titled Validation states

Checkboxes use the same validation states as inputs.

Validation classes

Section titled Validation classes
Class Description
.has-warning Used to warn users that the value they’ve entered has a potential problem, but it doesn’t block them from proceeding.
.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.
.has-success Used to notify users that the value they’ve entered is fine or has been submitted successfully.

Validation examples

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

Indeterminate state

Section titled 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>
Edit on GitHub File an issue on GitHub
Deploys by Netlify