<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<fieldset class="{{@root.prefix}}--fieldset">
  <legend class="{{@root.prefix}}--label">Checkbox (input + label)</legend>
  <!-- input + label -->
  <div class="{{@root.prefix}}--form-item {{@root.prefix}}--checkbox-wrapper">
    <input id="{{@root.prefix}}--checkbox-new" class="{{@root.prefix}}--checkbox" type="checkbox" value="new"
      name="checkbox" checked>
    <label for="{{@root.prefix}}--checkbox-new" class="{{@root.prefix}}--checkbox-label">Checkbox</label>
  </div>
  <!-- input + label indeterminate -->
  <div class="{{@root.prefix}}--form-item {{@root.prefix}}--checkbox-wrapper">
    <input id="{{@root.prefix}}--checkbox-ind" class="{{@root.prefix}}--checkbox" type="checkbox" value="new"
      name="checkbox" aria-checked="mixed">
    <label for="{{@root.prefix}}--checkbox-ind" class="{{@root.prefix}}--checkbox-label">Indeterminate checkbox</label>
  </div>
  <!-- input + label checked disabled -->
  <div class="{{@root.prefix}}--form-item {{@root.prefix}}--checkbox-wrapper">
    <input id="{{@root.prefix}}--checkbox-new--disabled" class="{{@root.prefix}}--checkbox" type="checkbox" value="new"
      name="checkbox" checked disabled>
    <label for="{{@root.prefix}}--checkbox-new--disabled" class="{{@root.prefix}}--checkbox-label">Checkbox</label>
  </div>
  <!-- input + label indeterminate disabled -->
  <div class="{{@root.prefix}}--form-item {{@root.prefix}}--checkbox-wrapper">
    <input id="{{@root.prefix}}--checkbox-ind--disabled" class="{{@root.prefix}}--checkbox" type="checkbox" value="new"
      name="checkbox" aria-checked="mixed" disabled>
    <label for="{{@root.prefix}}--checkbox-ind--disabled" class="{{@root.prefix}}--checkbox-label">Indeterminate
      checkbox</label>
  </div>
  <!-- input + label disabled -->
  <div class="{{@root.prefix}}--form-item {{@root.prefix}}--checkbox-wrapper">
    <input id="{{@root.prefix}}--checkbox-disabled" class="{{@root.prefix}}--checkbox" type="checkbox" value="new"
      name="checkbox" disabled>
    <label for="{{@root.prefix}}--checkbox-disabled" class="{{@root.prefix}}--checkbox-label">Disabled checkbox</label>
  </div>
</fieldset>
<fieldset class="{{@root.prefix}}--fieldset">
  <legend class="{{@root.prefix}}--label">Checkbox (label > input)</legend>
  <!-- label > input -->
  <div class="{{@root.prefix}}--form-item {{@root.prefix}}--checkbox-wrapper">
    <label for="{{@root.prefix}}--checkbox-new2" class="{{@root.prefix}}--checkbox-label">
      <input id="{{@root.prefix}}--checkbox-new2" class="{{@root.prefix}}--checkbox" type="checkbox" value="yellow"
        name="checkbox" checked>
      Checkbox
    </label>
  </div>
  <!-- label > input indeterminate -->
  <div class="{{@root.prefix}}--form-item {{@root.prefix}}--checkbox-wrapper">
    <label for="{{@root.prefix}}--checkbox-ind2" class="{{@root.prefix}}--checkbox-label"
      data-contained-checkbox-state="mixed">
      <input id="{{@root.prefix}}--checkbox-ind2" class="{{@root.prefix}}--checkbox" type="checkbox" value="yellow"
        name="checkbox" aria-checked="mixed">
      Indeterminate checkbox
    </label>
  </div>
  <!-- label > input checked disabled -->
  <div class="{{@root.prefix}}--form-item {{@root.prefix}}--checkbox-wrapper">
    <label for="{{@root.prefix}}--checkbox-new2--disabled" class="{{@root.prefix}}--checkbox-label">
      <input id="{{@root.prefix}}--checkbox-new2--disabled" class="{{@root.prefix}}--checkbox" type="checkbox"
        value="yellow" name="checkbox" checked disabled>
      Checkbox
    </label>
  </div>
  <!-- label > input indeterminate disabled -->
  <div class="{{@root.prefix}}--form-item {{@root.prefix}}--checkbox-wrapper">
    <label for="{{@root.prefix}}--checkbox-ind2--disabled" class="{{@root.prefix}}--checkbox-label"
      data-contained-checkbox-state="mixed">
      <input id="{{@root.prefix}}--checkbox-ind2--disabled" class="{{@root.prefix}}--checkbox" type="checkbox"
        value="yellow" name="checkbox" aria-checked="mixed" disabled>
      Indeterminate checkbox
    </label>
  </div>
  <!-- label > input unchecked disabled -->
  <div class="{{@root.prefix}}--form-item {{@root.prefix}}--checkbox-wrapper">
    <label for="{{@root.prefix}}--checkbox-disabled2" class="{{@root.prefix}}--checkbox-label">
      <input id="{{@root.prefix}}--checkbox-disabled2" class="{{@root.prefix}}--checkbox" type="checkbox" value="yellow"
        name="checkbox" disabled>
      Disabled checkbox
    </label>
  </div>
</fieldset>
