Checkbox

A checkbox is a square box that allows you to select the displayed option when activated. It is usually associated with form submissions.

Type Default State Disabled
Unchecked
Checked

Usage

Here is an example of a group of checkboxes. Default spacing is added between each .checkbox when there is more than one checkbox.

HTML 
<label class="checkbox">
    <input type="checkbox" name="checkbox-example" />
    <span class="checkbox-check" role="presentation" aria-hidden="true"></span>
    <span class="checkbox-text">Checkbox 1</span>
</label>

<label class="checkbox">
    <input type="checkbox" checked name="checkbox-example" />
    <span class="checkbox-check" role="presentation" aria-hidden="true"></span>
    <span class="checkbox-text">Checkbox 2</span>
</label>

Modifiers

Styles

.checkbox-muted can be used with .checkbox to change the checkbox background color.

HTML 
<label class="checkbox checkbox-muted">
    <input type="checkbox" checked name="checkbox-muted" />
    <span class="checkbox-check" role="presentation" aria-hidden="true"></span>
    <span class="checkbox-text">Checked</span>
</label>

is-checked can be used with .checkbox-check to create the appearance of a checkbox with a checked state, without having a clickable .checkbox input element.

HTML 
<label class="checkbox">
    <span class="checkbox-check is-checked" role="presentation" aria-hidden="true"></span>
    <span class="checkbox-text">Checked</span>
</label>

Size

.checkbox-sm is used with .checkbox to display a smaller checkbox.

HTML 
<label class="checkbox checkbox-sm">
    <input type="checkbox" checked name="checkbox-small" />
    <span class="checkbox-check" role="presentation" aria-hidden="true"></span>
    <span class="checkbox-text">Checked</span>
</label>

Figma