Checkbox

Checkboxes allow users to select multiple options from a list, or to mark an individual item as selected.

Sizes

Checkboxes are available in three sizes to cater for the diverse range of use cases and devices that our business uses. By default, the medium checkbox is used.

Small

Medium

Large

<label class="qtm-checkbox qtm-small">
  <input type="checkbox" checked />
  <span>Small</span>
</label>

<label class="qtm-checkbox qtm-medium">
  <input type="checkbox" checked />
  <span>Medium</span>
</label>

<label class="qtm-checkbox qtm-large">
  <input type="checkbox" checked />
  <span>Large</span>
</label>

Selection

Checkboxes can be unchecked, checked, or in an indeterminate state.

Nb: Checkboxes cannot be indeterminate with HTML - it is a property of the checkbox object, which can be set to true by JavaScript.

UncheckedCheckedIndeterminate

<label class="qtm-checkbox">
  <input type="checkbox" />
  <span>Unchecked</span>
</label>

<label class="qtm-checkbox">
  <input type="checkbox" checked />
  <span>Checked</span>
</label>

<label class="qtm-checkbox">
  <input type="checkbox" indeterminate />
  <span>Indeterminate</span>
</label>

<script>
  document
    .querySelectorAll('[indeterminate]')
    .forEach((checkbox) => (checkbox.indeterminate = true));
</script>

Colors

Checkboxes are available in two colors. The default color is the primary color.

UncheckedCheckedIndeterminate

Unchecked

Checked

Indeterminate

<label class="qtm-checkbox qtm-neutral"> ... </label> ...

Errors

Checkboxes can also have an error state to show that a selection needs to be made in order to move forward, or that a selection that was made is invalid.

Unchecked

Checked

Indeterminate

<label class="qtm-checkbox qtm-error"> ... </label> ...

Disabled

Checkboxes can also have a disable state.

Unchecked

Checked

Indeterminate

<label class="qtm-checkbox qtm-disabled">
  <input type="checkbox" disabled />
  <span>Unchecked</span>
</label>
...

Custom labels

Checkbox accepts any component as its label. Make sure to use items with clear textual labels, or elements that are self explanatory in the given context.

Option 1

This is some placeholder help text.

<label class="qtm-checkbox">
  <input type="checkbox" />
  <div>
    <span>Option 1</span>
    <p class="qtm-caption-1 text-bluegrey-500">
      This is some placeholder help text.
    </p>
  </div>
</label>
...

Checkbox Group

.qtm-checkbox-group is a helpful wrapper used to group checkbox elements.

Checkbox 1Checkbox 2Checkbox 3

<div class="qtm-checkbox-group">
  <label class="qtm-checkbox">
    <input type="checkbox" />
    <span>Checkbox 1</span>
  </label>

  <label class="qtm-checkbox">
    <input type="checkbox" />
    <span>Checkbox 2</span>
  </label>

  <label class="qtm-checkbox">
    <input type="checkbox" />
    <span>Checkbox 3</span>
  </label>
</div>

Sizes

.qtm-checkbox-group are available in three sizes that correspond to the different bottom margin values and size of their child elements. By default, the medium size is used.

SmallCheckbox 1Checkbox 2Checkbox 3MediumCheckbox 1Checkbox 2Checkbox 3LargeCheckbox 1Checkbox 2Checkbox 3

<div class="qtm-checkbox-group qtm-small">
  <label class="qtm-checkbox">
    <input type="checkbox" />
    <span>Checkbox 1</span>
  </label>
  ...
</div>
<div class="qtm-checkbox-group qtm-medium">...</div>
<div class="qtm-checkbox-group qtm-large">...</div>