Checkbox

A checkbox allows users to decide on a state of an object.

Basic

HTML
    <form class="form">
  <div class="checkbox">
    <input type="checkbox" id="checkbox_basic">
    <label for="checkbox_basic">Label</label>
  </div>
</form>
  

Group

Group label
Description text
HTML
    <form class="form">
  <div class="form__item">
    <div class="checkbox-group">
      <div class="checkbox-group__label">Group label</div>

      <div class="checkbox">
        <input type="checkbox" id="checkbox_1">
        <label for="checkbox_1">First label</label>
      </div>

      <div class="checkbox">
        <input type="checkbox" id="checkbox_2">
        <label for="checkbox_2">Second label</label>
      </div>

      <div class="checkbox">
        <input type="checkbox" id="checkbox_3">
        <label for="checkbox_3">Third label</label>
      </div>

      <div class="checkbox">
        <input type="checkbox" disabled="disabled" id="checkbox_4">
        <label for="checkbox_4">Fourth label</label>
      </div>
    </div>

    <div class="form__description">Description text</div>
  </div>
</form>
  

Usage

Attribute Description Possible values Type Required Default
disabled Set with disabled on input disabled string - -
checked Set with checked on input checked string - -