carbon-components/src/components/checkbox/checkbox.html

Carbon Components is a component library for IBM Cloud

<fieldset class="bx--fieldset">
  <legend class="bx--label">Checkbox heading</legend>
  <!-- input + label -->
  <div class="bx--form-item bx--checkbox-wrapper">
    <input id="bx--checkbox-new" class="bx--checkbox" type="checkbox" value="new" name="checkbox">
    <label for="bx--checkbox-new" class="bx--checkbox-label">Checkbox label</label>
  </div>
    <!-- label > input -->
    <div class="bx--form-item bx--checkbox-wrapper">
      <label for="bx--checkbox-new2" class="bx--checkbox-label">
        <input id="bx--checkbox-new2" class="bx--checkbox" type="checkbox" value="yellow" name="checkbox" checked>
        Checkbox label 2
      </label>
    </div>
    <!-- input + label indeterminate -->
    <div class="bx--form-item bx--checkbox-wrapper">
      <input id="bx--checkbox-ind" class="bx--checkbox" type="checkbox" value="new" name="checkbox" aria-checked="mixed">
      <label for="bx--checkbox-ind" class="bx--checkbox-label">Checkbox label indeterminate</label>
    </div>

    <div class="bx--form-item bx--checkbox-wrapper">
      <label for="bx--checkbox-ind2" class="bx--checkbox-label" data-contained-checkbox-state="mixed">
        <input id="bx--checkbox-ind2" class="bx--checkbox" type="checkbox" value="yellow" name="checkbox" aria-checked="mixed">
        Checkbox label 2 indeterminate
      </label>
    </div>

</fieldset>