{{#> web/layout/default title="Toggle" parentPageName="Components" isUnstable=true }}

<section class="UNSTABLE_Section">

  <div class="Container">

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

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

      <label for="toggle-default" class="UNSTABLE_Toggle">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label">Toggle Label</span>
      </span>
        <input type="checkbox" id="toggle-default" class="UNSTABLE_Toggle__input" name="default" />
      </label>

      <label for="toggle-default-checked" class="UNSTABLE_Toggle">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label">Toggle Label</span>
      </span>
        <input type="checkbox" id="toggle-default-checked" class="UNSTABLE_Toggle__input" name="default" checked />
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

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

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

      <label for="toggle-indicators" class="UNSTABLE_Toggle">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label">Toggle Label</span>
      </span>
        <input type="checkbox" id="toggle-indicators" class="UNSTABLE_Toggle__input UNSTABLE_Toggle__input--indicators" name="default" />
      </label>

      <label for="toggle-indicators-checked" class="UNSTABLE_Toggle">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label">Toggle Label</span>
      </span>
        <input type="checkbox" id="toggle-indicators-checked" class="UNSTABLE_Toggle__input UNSTABLE_Toggle__input--indicators" name="default" checked />
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

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

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

      <label for="toggle-required" class="UNSTABLE_Toggle">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label UNSTABLE_Toggle__label--required">Toggle Label</span>
      </span>
        <input type="checkbox" id="toggle-required" class="UNSTABLE_Toggle__input" name="default" required />
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

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

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

      <label for="toggle-hidden-label" class="UNSTABLE_Toggle">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label UNSTABLE_Toggle__label--hidden">Toggle Label</span>
      </span>
        <input type="checkbox" id="toggle-hidden-label" class="UNSTABLE_Toggle__input" name="default" />
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

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

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

      <label for="toggle-fluid" class="UNSTABLE_Toggle UNSTABLE_Toggle--fluid">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label">Toggle Label</span>
      </span>
        <input type="checkbox" id="toggle-fluid" class="UNSTABLE_Toggle__input" name="default" />
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

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

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

      <label for="toggle-default-disabled" class="UNSTABLE_Toggle UNSTABLE_Toggle--disabled">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label">Toggle Label</span>
      </span>
        <input type="checkbox" id="toggle-default-disabled" class="UNSTABLE_Toggle__input" name="default" disabled />
      </label>

      <label for="toggle-default-checked-disabled" class="UNSTABLE_Toggle UNSTABLE_Toggle--disabled">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label">Toggle Label</span>
      </span>
        <input type="checkbox" id="toggle-default-checked-disabled" class="UNSTABLE_Toggle__input" name="default" checked disabled />
      </label>

      <label for="toggle-helper-text-disabled" class="UNSTABLE_Toggle UNSTABLE_Toggle--disabled">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label">Toggle Label</span>
        <span class="UNSTABLE_Toggle__helperText" id="toggle-helper-text-disabled-helper-text">Helper text</span>
      </span>
        <input type="checkbox" id="toggle-helper-text-disabled" class="UNSTABLE_Toggle__input" name="default" aria-describedby="toggle-helper-text-disabled-helper-text" disabled />
      </label>

      <label for="toggle-warning-helper-text-disabled" class="UNSTABLE_Toggle UNSTABLE_Toggle--warning UNSTABLE_Toggle--disabled">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label">Toggle Label</span>
        <span class="UNSTABLE_Toggle__helperText" id="toggle-warning-helper-text-helper-text-disabled">Helper text</span>
        <span class="UNSTABLE_Toggle__validationText" id="toggle-warning-helper-text-validation-text-disabled">Validation text</span>
      </span>
        <input type="checkbox" id="toggle-warning-helper-text-disabled" class="UNSTABLE_Toggle__input" name="default" aria-describedby="toggle-warning-helper-text-helper-text toggle-warning-helper-text-validation-text" checked disabled />
      </label>

      <label for="toggle-indicators-disabled" class="UNSTABLE_Toggle UNSTABLE_Toggle--disabled">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label">Toggle Label</span>
      </span>
        <input type="checkbox" id="toggle-indicators-disabled" class="UNSTABLE_Toggle__input UNSTABLE_Toggle__input--indicators" name="default" disabled />
      </label>

      <label for="toggle-indicators-disabled-checked" class="UNSTABLE_Toggle UNSTABLE_Toggle--disabled">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label">Toggle Label</span>
      </span>
        <input type="checkbox" id="toggle-indicators-disabled-checked" class="UNSTABLE_Toggle__input UNSTABLE_Toggle__input--indicators" name="default" disabled checked />
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

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

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

      <label for="toggle-helper-text" class="UNSTABLE_Toggle">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label">Toggle Label</span>
        <span class="UNSTABLE_Toggle__helperText" id="toggle-helper-text-helper-text">Helper text</span>
      </span>
        <input type="checkbox" id="toggle-helper-text" class="UNSTABLE_Toggle__input" name="default" aria-describedby="toggle-helper-text-helper-text" />
      </label>

      <label for="toggle-helper-text-checked" class="UNSTABLE_Toggle">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label">Toggle Label</span>
        <span class="UNSTABLE_Toggle__helperText" id="toggle-helper-text-checked-helper-text">Helper text</span>
      </span>
        <input type="checkbox" id="toggle-helper-text-checked" class="UNSTABLE_Toggle__input" name="default" aria-describedby="toggle-helper-text-checked-helper-text" checked />
      </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--stretch">

      <label for="toggle-success" class="UNSTABLE_Toggle UNSTABLE_Toggle--success">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label">Toggle Label</span>
      </span>
        <input type="checkbox" id="toggle-success" class="UNSTABLE_Toggle__input" name="default" />
      </label>

      <label for="toggle-warning" class="UNSTABLE_Toggle UNSTABLE_Toggle--warning">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label">Toggle Label</span>
        <span class="UNSTABLE_Toggle__validationText" id="toggle-warning-validation-text">Validation text</span>
      </span>
        <input type="checkbox" id="toggle-warning" class="UNSTABLE_Toggle__input" name="default" aria-describedby="toggle-warning-validation-text" checked />
      </label>

      <div class="UNSTABLE_Toggle UNSTABLE_Toggle--danger">
        <div class="UNSTABLE_Toggle__text">
          <label for="toggle-danger" class="UNSTABLE_Toggle__label">Toggle Label</label>
          <div class="UNSTABLE_Toggle__validationText" id="toggle-danger-validation-text">
            <ul>
              <li>First validation text</li>
              <li>Second validation text</li>
            </ul>
          </div>
        </div>
        <input type="checkbox" id="toggle-danger" class="UNSTABLE_Toggle__input" name="default" aria-describedby="toggle-danger-validation-text" />
      </div>

      <label for="toggle-warning-helper-text" class="UNSTABLE_Toggle UNSTABLE_Toggle--warning">
      <span class="UNSTABLE_Toggle__text">
        <span class="UNSTABLE_Toggle__label">Toggle Label</span>
        <span class="UNSTABLE_Toggle__helperText" id="toggle-warning-helper-text-helper-text">Helper text</span>
        <span class="UNSTABLE_Toggle__validationText" id="toggle-warning-helper-text-validation-text">Validation text</span>
      </span>
        <input type="checkbox" id="toggle-warning-helper-text" class="UNSTABLE_Toggle__input" name="default" aria-describedby="toggle-warning-helper-text-helper-text toggle-warning-helper-text-validation-text" checked />
      </label>

    </div>

  </div>

</section>

{{/web/layout/default }}