{{#> web/layout/default title="Checkbox" parentPageName="Components" }}

<script>
  const inputs = ['checkbox-indeterminate', 'checkbox-disabled-indeterminate'];

  window.addEventListener('DOMContentLoaded', function () {
    inputs.forEach(function (input) {
      const checkbox = document.getElementById(input);
      checkbox.indeterminate = true;
    });
  });
</script>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Default</h2>

    <div class="docs-Stack docs-Stack--start">

      <label for="checkbox-default" class="Checkbox">
        <input type="checkbox" id="checkbox-default" class="Checkbox__input" name="default" />
        <span class="Checkbox__text">
          <span class="Checkbox__label">Checkbox Label</span>
        </span>
      </label>

      <label for="checkbox-default-checked" class="Checkbox">
        <input type="checkbox" id="checkbox-default-checked" class="Checkbox__input" name="defaultChecked" checked />
        <span class="Checkbox__text">
          <span class="Checkbox__label">Checkbox Label</span>
        </span>
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Indeterminate</h2>

    <div class="docs-Stack docs-Stack--start">

      <label for="checkbox-indeterminate" class="Checkbox">
        <input type="checkbox" id="checkbox-indeterminate" class="Checkbox__input" name="indeterminate" />
        <span class="Checkbox__text">
          <span class="Checkbox__label">Checkbox Label</span>
        </span>
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Required</h2>

    <div class="docs-Stack docs-Stack--start">

      <label for="checkbox-required" class="Checkbox">
        <input type="checkbox" id="checkbox-required" class="Checkbox__input" name="required" required />
        <span class="Checkbox__text">
          <span class="Checkbox__label Checkbox__label--required">Checkbox Label</span>
        </span>
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Hidden Label</h2>

    <div class="docs-Stack docs-Stack--start">

      <label for="checkbox-hidden-label" class="Checkbox">
        <input type="checkbox" id="checkbox-hidden-label" class="Checkbox__input" name="hiddenLabel" />
        <span class="Checkbox__text">
          <span class="Checkbox__label Checkbox__label--hidden">Checkbox Label</span>
        </span>
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Helper Text</h2>

    <div class="docs-Stack docs-Stack--start">

      <label for="checkbox-helper-text" class="Checkbox">
        <input type="checkbox" id="checkbox-helper-text" class="Checkbox__input" name="helperText" />
        <span class="Checkbox__text">
          <span class="Checkbox__label">Checkbox Label</span>
          <span class="Checkbox__helperText">Helper text</span>
        </span>
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Disabled</h2>

    <div class="docs-Stack docs-Stack--start">

      <label for="checkbox-disabled" class="Checkbox Checkbox--disabled">
        <input type="checkbox" id="checkbox-disabled" class="Checkbox__input" name="disabled" disabled />
        <span class="Checkbox__text">
          <span class="Checkbox__label">Checkbox Label</span>
        </span>
      </label>

      <label for="checkbox-disabled-helper-text" class="Checkbox Checkbox--disabled">
        <input
          type="checkbox"
          id="checkbox-disabled-helper-text"
          class="Checkbox__input"
          name="disabledWithText"
          disabled
          checked
          required
        />
        <span class="Checkbox__text">
          <span class="Checkbox__label Checkbox__label--required">Checkbox Label</span>
          <span class="Checkbox__helperText">Helper text</span>
        </span>
      </label>

      <label for="checkbox-disabled-indeterminate" class="Checkbox Checkbox--disabled">
        <input type="checkbox" id="checkbox-disabled-indeterminate" class="Checkbox__input" name="disabledIndeterminate" disabled />
        <span class="Checkbox__text">
          <span class="Checkbox__label">Checkbox Label</span>
        </span>
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Validation State with Validation Text</h2>

    <div class="docs-Stack docs-Stack--start">

      <label for="checkbox-success" class="Checkbox Checkbox--success">
        <input type="checkbox" id="checkbox-success" class="Checkbox__input" name="success" />
        <span class="Checkbox__text">
          <span class="Checkbox__label">Checkbox Label</span>
        </span>
      </label>

      <label for="checkbox-warning" class="Checkbox Checkbox--warning">
        <input type="checkbox" id="checkbox-warning" class="Checkbox__input" name="warning" />
        <span class="Checkbox__text">
          <span class="Checkbox__label">Checkbox Label</span>
          <span class="Checkbox__validationText">Warning validation text</span>
        </span>
      </label>

      <div class="Checkbox Checkbox--danger">
        <input type="checkbox" id="checkbox-danger" class="Checkbox__input" name="danger" />
        <div class="Checkbox__text">
          <label for="checkbox-danger" class="Checkbox__label">Checkbox Label</label>
          <div class="Checkbox__validationText">
            <ul>
              <li>First validation text</li>
              <li>Second validation text</li>
            </ul>
          </div>
        </div>
      </div>

      <label for="checkbox-warning-helper-text" class="Checkbox Checkbox--warning">
        <input type="checkbox" id="checkbox-warning-helper-text" class="Checkbox__input" name="warningWithText" checked />
        <span class="Checkbox__text">
          <span class="Checkbox__label">Checkbox Label</span>
          <span class="Checkbox__helperText">Helper text</span>
          <span class="Checkbox__validationText">Warning validation text</span>
        </span>
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Item</h2>

    <div class="docs-Stack docs-Stack--start">

      <label for="checkbox-item-default" class="Checkbox Checkbox--item">
        <input type="checkbox" id="checkbox-item-default" class="Checkbox__input" name="item" />
        <span class="Checkbox__text">
          <span class="Checkbox__label">Checkbox Label</span>
        </span>
      </label>

      <label for="checkbox-item-default-checked" class="Checkbox Checkbox--item">
        <input type="checkbox" id="checkbox-item-default-checked" class="Checkbox__input" name="itemChecked" checked />
        <span class="Checkbox__text">
          <span class="Checkbox__label">Checkbox Label</span>
        </span>
      </label>

      <label for="checkbox-item-helper-text" class="Checkbox Checkbox--item">
        <input type="checkbox" id="checkbox-item-helper-text" class="Checkbox__input" name="itemWithText" />
        <span class="Checkbox__text">
          <span class="Checkbox__label">Checkbox Label</span>
          <span class="Checkbox__helperText">Helper text</span>
        </span>
      </label>

      <label for="checkbox-item-disabled" class="Checkbox Checkbox--item Checkbox--disabled">
        <input type="checkbox" id="checkbox-item-disabled" class="Checkbox__input" name="itemDisabled" disabled />
        <span class="Checkbox__text">
          <span class="Checkbox__label">Checkbox Label</span>
        </span>
      </label>

      <label for="checkbox-item-disabled-helper-text" class="Checkbox Checkbox--item Checkbox--disabled">
        <input
          type="checkbox"
          id="checkbox-item-disabled-helper-text"
          class="Checkbox__input"
          name="itemDisabledChecked"
          disabled
          checked
          required
        />
        <span class="Checkbox__text">
          <span class="Checkbox__label Checkbox__label--required">Checkbox Label</span>
          <span class="Checkbox__helperText">Helper text</span>
        </span>
      </label>

    </div>

  </div>

</section>

{{/web/layout/default }}