Checkbox – Design Portal

Checkboxes allow users to select one or more options from a list.

Demo

Default checkbox

<div class="form-check">
  <input class="form-check__input" type="checkbox" value="" id="formDemo">
  <label class="form-check__label" for="formDemo">
    Default checkbox
  </label>
</div>

.form-check {
  display: inline-flex;
  column-gap: 0.5rem;
  min-block-size: 1.5rem;
  margin-block-end: 0.125rem;
  
  &__input {
    appearance: none;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    block-size: 1rem;
    border: 0.0625rem solid rgba(0, 0, 0, 0.25);
    color-adjust: exact;
    inline-size: 1rem;
    vertical-align: top;

    &[type="checkbox"] {
      border-radius: 0.25em;
    }

    &:checked {
      background-color: var(--accent-1);
      border-color: var(--accent-1);

      &[type="checkbox"] {
        background-image: url(#{$assetPath}/checkbox.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 0.625rem auto;
      }
    }

    &:disabled {
      opacity: 0.5;
      pointer-events: none;

      ~ .form-check__label {
        opacity: 0.5;
      }
    }
  }

  &__label {
    display: inline-block;
  }
}

No JS! 😀

Note

Checkbox elements are not heavily prevalent in our unified themes, but this guide can be used as a reference for future themes.

States & Variations

Default

No attributes added to the input element.

Default checkbox

<div class="form-check">
  <input class="form-check__input" type="checkbox" value="" id="formDefault">
  <label class="form-check__label" for="formDefault">
    Default checkbox
  </label>
</div>

Checked

An attribute of checked is added to the input element.

Checked checkbox

<div class="form-check">
  <input class="form-check__input" type="checkbox" value="" id="formChecked" checked>
  <label class="form-check__label" for="formChecked">
    Checked checkbox
  </label>
</div>

Disabled

An attribute of disabled is added to the input element.

Checked checkbox

<div class="form-check">
  <input class="form-check__input" type="checkbox" value="" id="formDisabled" disabled>
  <label class="form-check__label" for="formDisabled">
    Checked checkbox
  </label>
</div>

Anatomy

Checkbox
Checkbox input
Checkbox label