Checkboxes

<div class="ch-form__group">
  <input
    class="ch-checkbox"
    id="newsletter"
    name="newsletter"
    type="checkbox"
  />
  <label for="newsletter" class="ch-checkbox__label">
    Subscribe to our newsletter for exclusive offers.
  </label>
</div>

<div class="ch-form__group">
  <input
    class="ch-checkbox"
    disabled="true"
    id="unavailable"
    name="unavailable"
    type="checkbox"
  />
  <label for="unavailable" class="ch-checkbox__label">
    This option is unavailable.
  </label>
</div>

<div class="ch-form__group">
  <input
    class="ch-checkbox"
    id="primary-checkbox"
    name="primary-checkbox"
    type="checkbox"
  />
  <label
    for="primary-checkbox"
    class="ch-checkbox__label ch-checkbox__label--right ch-checkbox__label--primary"
  >
    A primary blue checkbox on the right.
  </label>
</div>

Need that checkbox right-aligned to the full width of the container? Add ch-display--flex ch-justify-content--between to the label.

---

Legacy checkbox

If you can't use the simpler markup above, you can still use the previous method of nesting the input inside the label.

<div class="ch-form__group">
  <label class="ch-checkbox__label ch-checkbox__label--hide-checkbox">
    <input
      class="ch-checkbox"
      id="legacy-checkbox"
      name="legacy-checkbox"
      type="checkbox"
    />
    <span class="ch-checkbox__switch"></span>
    Legacy checkbox
  </label>
</div>

<div class="ch-form__group">
  <label class="ch-checkbox__label ch-checkbox__label--hide-checkbox">
    <input
      class="ch-checkbox"
      id="legacy-primary-checkbox"
      name="legacy-primary-checkbox"
      type="checkbox"
    />
    <span class="ch-checkbox__switch ch-checkbox__switch--primary"></span>
    Legacy primary checkbox
  </label>
</div>

---

Toggle

A toggle indicating an on or off state. You can manually set the toggled state by adding the ch-toggle--checked modifier. If you use it as part of the checkbox markup, it will automatically toggle based on the checked state of the input. With this markup, you should use ch-checkbox__label--hide-checkbox to hide the standard checkbox.

<div class="ch-form__group">
  <input
    class="ch-checkbox"
    id="toggle-checkbox"
    name="toggle-checkbox"
    type="checkbox"
  />
  <label
    for="toggle-checkbox"
    class="ch-checkbox__label ch-checkbox__label--hide-checkbox"
  >
    Save my deposit
    <span class="ch-toggle ch-ml--2"></span>
  </label>
</div>

<div class="ch-form__group">
  <input
    class="ch-checkbox"
    id="toggle-checkbox-2"
    name="toggle-checkbox-2"
    type="checkbox"
  />
  <label
    for="toggle-checkbox-2"
    class="ch-checkbox__label ch-checkbox__label--primary ch-checkbox__label--hide-checkbox"
  >
    Primary toggle
    <span class="ch-toggle ch-ml--2"></span>
  </label>
</div>