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 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 margin-bottom-xxs">
    <input type="checkbox" />
    <span class="checkbox-check" role="presentation" aria-hidden="true"></span>
    <span class="checkbox-text" aria-hidden="true">Checkbox 1</span>
</label>

<label class="checkbox">
    <input type="checkbox" checked />
    <span class="checkbox-check" role="presentation" aria-hidden="true"></span>
    <span class="checkbox-text" aria-hidden="true">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 />
    <span class="checkbox-check" role="presentation" aria-hidden="true"></span>
    <span class="checkbox-text" aria-hidden="true">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" aria-hidden="true">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 />
    <span class="checkbox-check" role="presentation" aria-hidden="true"></span>
    <span class="checkbox-text" aria-hidden="true">Checked</span>
</label>

Figma