src/demos/checkbox.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Checkbox</title>
    <style>
      .parent {
        display: flex;
        align-items: center;
        padding: 25px 0;
        justify-content: center;
      }

      .child {
        flex: 1 0 21%;
        padding: 0 25px;
        color: var(--calcite-ui-text-3);
        font-family: var(--calcite-sans-family);
        font-size: var(--calcite-font-size-0);
        font-weight: var(--calcite-font-weight-medium);
      }

      .right-aligned-text {
        text-align: right;
      }
    </style>
    <script src="_assets/head.js"></script>
    <script type="module" src="./_assets/demo-form.js"></script>
    <script type="module" src="./_assets/demo-spacer.js"></script>
  </head>

  <body>
    <demo-dom-swapper>
      <h1 style="margin: 0 auto; text-align: center">Checkbox</h1>

      <div class="parent">
        <div class="child"></div>
        <div class="child">Small</div>
        <div class="child">Medium</div>
        <div class="child">Large</div>
      </div>

      <!--
      **************************************************
      * UNCHECKED
      **************************************************
    -->
      <div class="parent">
        <!-- small -->
        <div class="child right-aligned-text">unchecked</div>

        <div class="child">
          <calcite-label>
            <calcite-checkbox name="s-unchecked" scale="s"></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- medium -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox name="m-unchecked" scale="m"></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- large -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox name="m-unchecked" scale="l"></calcite-checkbox>
          </calcite-label>
        </div>
      </div>

      <!--
      **************************************************
      * UNCHECKED DISABLED
      **************************************************
    -->
      <div class="parent">
        <!-- small -->
        <div class="child right-aligned-text">unchecked disabled</div>
        <div class="child">
          <calcite-label>
            <calcite-checkbox disabled name="s-unchecked-disabled" scale="s"></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- medium -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox disabled name="m-unchecked-disabled" scale="m"></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- large -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox disabled name="m-unchecked-disabled" scale="l"></calcite-checkbox>
          </calcite-label>
        </div>
      </div>

      <!--
      **************************************************
      * CHECKED
      **************************************************
    -->
      <div class="parent">
        <!-- small -->
        <div class="child right-aligned-text">checked</div>
        <div class="child">
          <calcite-label>
            <calcite-checkbox checked name="s-checked" scale="s"></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- medium -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox checked name="m-checked" scale="m"></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- large -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox checked name="l-checked" scale="l"></calcite-checkbox>
          </calcite-label>
        </div>
      </div>

      <!--
      **************************************************
      * CHECKED DISABLED
      **************************************************
    -->
      <div class="parent">
        <!-- small -->
        <div class="child right-aligned-text">checked disabled</div>
        <div class="child">
          <calcite-label>
            <calcite-checkbox checked disabled name="s-checked-disabled" scale="s"></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- medium -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox checked disabled name="m-checked-disabled" scale="m"></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- large -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox checked disabled name="l-checked-disabled" scale="l"></calcite-checkbox>
          </calcite-label>
        </div>
      </div>

      <!--
      **************************************************
      * INDETERMINATE UNCHECKED
      **************************************************
    -->
      <div class="parent">
        <!-- small -->
        <div class="child right-aligned-text">indeterminate unchecked</div>
        <div class="child">
          <calcite-label>
            <calcite-checkbox indeterminate name="s-unchecked-indeterminate" scale="s"></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- medium -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox indeterminate name="m-unchecked-indeterminate" scale="m"></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- large -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox indeterminate name="l-unchecked-indeterminate" scale="l"></calcite-checkbox>
          </calcite-label>
        </div>
      </div>

      <!--
      **************************************************
      * INDETERMINATE UNCHECKED DISABLED
      **************************************************
    -->
      <div class="parent">
        <!-- small -->
        <div class="child right-aligned-text">indeterminate unchecked disabled</div>
        <div class="child">
          <calcite-label>
            <calcite-checkbox
              disabled
              indeterminate
              name="s-unchecked-indeterminate-disabled"
              scale="s"
            ></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- medium -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox
              disabled
              indeterminate
              name="m-unchecked-indeterminate-disabled"
              scale="m"
            ></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- large -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox
              disabled
              indeterminate
              name="l-unchecked-indeterminate-disabled"
              scale="l"
            ></calcite-checkbox>
          </calcite-label>
        </div>
      </div>

      <!--
      **************************************************
      * INDETERMINATE CHECKED
      **************************************************
    -->
      <div class="parent">
        <!-- small -->
        <div class="child right-aligned-text">indeterminate checked</div>
        <div class="child">
          <calcite-label>
            <calcite-checkbox checked indeterminate name="s-checked-indeterminate" scale="s"></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- medium -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox checked indeterminate name="m-checked-indeterminate" scale="m"></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- large -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox checked indeterminate name="l-checked-indeterminate" scale="l"></calcite-checkbox>
          </calcite-label>
        </div>
      </div>

      <!--
      **************************************************
      * INDETERMINATE CHECKED DISABLED
      **************************************************
    -->
      <div class="parent">
        <!-- small -->
        <div class="child right-aligned-text">indeterminate checked disabled</div>
        <div class="child">
          <calcite-label>
            <calcite-checkbox
              disabled
              checked
              indeterminate
              name="s-checked-indeterminate-disabled"
              scale="s"
            ></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- medium -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox
              disabled
              checked
              indeterminate
              name="m-checked-indeterminate-disabled"
              scale="m"
            ></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- large -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox
              disabled
              checked
              indeterminate
              name="l-checked-indeterminate-disabled"
              scale="l"
            ></calcite-checkbox>
          </calcite-label>
        </div>
      </div>

      <!--
      **************************************************
      * WRAPPED IN CALCITE-LABEL
      **************************************************
    -->
      <div class="parent">
        <div class="child right-aligned-text">wrapped in calcite-label</div>

        <!-- small -->
        <div class="child">
          <calcite-label>
            wrapped in calcite-label
            <calcite-checkbox name="wrapped-in-calcite-label" scale="s"></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- medium -->
        <div class="child">
          <calcite-label>
            wrapped in calcite-label
            <calcite-checkbox name="wrapped-in-calcite-label" scale="m"></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- large -->
        <div class="child">
          <calcite-label>
            wrapped in calcite-label
            <calcite-checkbox name="wrapped-in-calcite-label" scale="l"></calcite-checkbox>
          </calcite-label>
        </div>
      </div>

      <!--
      **************************************************
      * WRAPPED IN INLINE CALCITE-LABEL
      **************************************************
    -->
      <div class="parent">
        <div class="child right-aligned-text">wrapped in inline calcite-label</div>

        <!-- small -->
        <div class="child">
          <calcite-label>
            wrapped in inline calcite-label
            <calcite-checkbox name="wrapped-in-inline-calcite-label" scale="s"></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- medium -->
        <div class="child">
          <calcite-label>
            wrapped in inline calcite-label
            <calcite-checkbox name="wrapped-in-inline-calcite-label" scale="m"></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- large -->
        <div class="child">
          <calcite-label>
            wrapped in inline calcite-label
            <calcite-checkbox name="wrapped-in-inline-calcite-label" scale="l"></calcite-checkbox>
          </calcite-label>
        </div>
      </div>

      <!--
      **************************************************
      * WRAPPED IN INLINE CALCITE-LABEL
      **************************************************
    -->
      <div class="parent">
        <div class="child right-aligned-text">wrapped in inline calcite-label reversed</div>

        <!-- small -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox name="wrapped-in-calcite-label-reverse" scale="s"></calcite-checkbox>
            wrapped in inline calcite-label reversed
          </calcite-label>
        </div>

        <!-- medium -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox name="wrapped-in-calcite-label-reverse" scale="m"></calcite-checkbox>
            wrapped in inline calcite-label reversed
          </calcite-label>
        </div>

        <!-- large -->
        <div class="child">
          <calcite-label>
            <calcite-checkbox name="wrapped-in-calcite-label-reverse" scale="l"></calcite-checkbox>
            wrapped in inline calcite-label reversed
          </calcite-label>
        </div>
      </div>

      <!--
      **************************************************
      * WRAPPED IN CALCITE-LABEL WITH FOR
      **************************************************
    -->
      <div class="parent">
        <div class="child right-aligned-text">wrapped in calcite-label with for</div>

        <!-- small -->
        <div class="child">
          <calcite-label for="light-wrapped-in-calcite-label-with-for-small">
            wrapped in calcite-label with for
            <calcite-checkbox
              id="light-wrapped-in-calcite-label-with-for-small"
              name="small-light-wrapped-in-calcite-label-with-for"
              scale="s"
            ></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- medium -->
        <div class="child">
          <calcite-label for="light-wrapped-in-calcite-label-with-for-medium">
            wrapped in calcite-label with for
            <calcite-checkbox
              id="light-wrapped-in-calcite-label-with-for-medium"
              name="medium-light-wrapped-in-calcite-label-with-for"
              scale="m"
            ></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- large -->
        <div class="child">
          <calcite-label for="light-wrapped-in-calcite-label-with-for-large">
            wrapped in calcite-label with for
            <calcite-checkbox
              id="light-wrapped-in-calcite-label-with-for-large"
              name="large-light-wrapped-in-calcite-label-with-for"
              scale="l"
            ></calcite-checkbox>
          </calcite-label>
        </div>
      </div>

      <!--
      **************************************************
      * WRAPPED IN CALCITE-LABEL SPAN WITH FOR
      **************************************************
    -->
      <div class="parent">
        <div class="child right-aligned-text">wrapped in calcite-label span with for</div>

        <!-- small -->
        <div class="child">
          <calcite-label for="light-wrapped-in-calcite-label-span-with-for-small">
            <span>wrapped in calcite-label span with for</span>
            <calcite-checkbox
              id="light-wrapped-in-calcite-label-span-with-for-small"
              name="small-light-wrapped-in-calcite-label-span-with-for"
              scale="s"
            ></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- medium -->
        <div class="child">
          <calcite-label for="light-wrapped-in-calcite-label-span-with-for-medium">
            <span>wrapped in calcite-label span with for</span>
            <calcite-checkbox
              id="light-wrapped-in-calcite-label-span-with-for-medium"
              name="medium-light-wrapped-in-calcite-label-span-with-for"
              scale="m"
            ></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- large -->
        <div class="child">
          <calcite-label for="light-wrapped-in-calcite-label-span-with-for-large">
            <span>wrapped in calcite-label span with for</span>
            <calcite-checkbox
              id="light-wrapped-in-calcite-label-span-with-for-large"
              name="large-light-wrapped-in-calcite-label-span-with-for"
              scale="l"
            ></calcite-checkbox>
          </calcite-label>
        </div>
      </div>

      <!--
      **************************************************
      * SIBLING CALCITE-LABEL
      **************************************************
    -->
      <div class="parent">
        <div class="child right-aligned-text">sibling calcite-label</div>

        <!-- small -->
        <div class="child">
          <calcite-label for="light-sibling-calcite-label-small"
            >sibling calcite-label
            <calcite-checkbox
              id="light-sibling-calcite-label-small"
              name="small-sibling-calcite-label"
              scale="s"
            ></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- medium -->
        <div class="child">
          <calcite-label for="light-sibling-calcite-label-medium"
            >sibling calcite-label
            <calcite-checkbox
              id="light-sibling-calcite-label-medium"
              name="medium-sibling-calcite-label"
              scale="m"
            ></calcite-checkbox>
          </calcite-label>
        </div>

        <!-- large -->
        <div class="child">
          <calcite-label for="light-sibling-calcite-label-large"
            >sibling calcite-label
            <calcite-checkbox
              id="light-sibling-calcite-label-large"
              name="medium-sibling-calcite-label"
              scale="l"
            ></calcite-checkbox>
          </calcite-label>
        </div>
      </div>

      <!--
      **************************************************
      * WRAPPED IN NATIVE LABEL
      **************************************************
    -->
      <div class="parent">
        <div class="child right-aligned-text">wrapped in native label</div>

        <!-- small -->
        <div class="child">
          <label>
            <calcite-checkbox name="wrapped-in-label-small" scale="s"></calcite-checkbox>
            wrapped in native label
          </label>
        </div>

        <!-- medium -->
        <div class="child">
          <label>
            <calcite-checkbox name="wrapped-in-label-medium" scale="m"></calcite-checkbox>
            wrapped in native label
          </label>
        </div>

        <!-- large -->
        <div class="child">
          <label>
            <calcite-checkbox name="wrapped-in-label-large" scale="l"></calcite-checkbox>
            wrapped in native label
          </label>
        </div>
      </div>

      <!--
      **************************************************
      * WRAPPED IN NATIVE LABEL WITH FOR
      **************************************************
    -->
      <div class="parent">
        <div class="child right-aligned-text">wrapped in native label with for</div>

        <!-- small -->
        <div class="child">
          <label for="light-wrapped-in-label-with-for-small">
            <calcite-checkbox
              id="light-wrapped-in-label-with-for-small"
              name="light-wrapped-in-label-with-for-small"
              scale="s"
            ></calcite-checkbox>
            wrapped in native label with for
          </label>
        </div>

        <!-- medium -->
        <div class="child">
          <label for="light-wrapped-in-label-with-for-medium">
            <calcite-checkbox
              id="light-wrapped-in-label-with-for-medium"
              name="light-wrapped-in-label-with-for-medium"
              scale="m"
            ></calcite-checkbox>
            wrapped in native label with for
          </label>
        </div>

        <!-- large -->
        <div class="child">
          <label for="light-wrapped-in-label-with-for-large">
            <calcite-checkbox
              id="light-wrapped-in-label-with-for-large"
              name="light-wrapped-in-label-with-for-large"
              scale="l"
            ></calcite-checkbox>
            wrapped in native label with for
          </label>
        </div>
      </div>

      <!--
      **************************************************
      * SIBLING NATIVE LABEL
      **************************************************
    -->
      <div class="parent">
        <div class="child right-aligned-text">sibling native label</div>

        <!-- small -->
        <div class="child">
          <label for="sibling-label-small"
            >sibling native label
            <calcite-checkbox id="sibling-label-small" name="small-sibling-label" scale="s"></calcite-checkbox>
          </label>
        </div>

        <!-- medium -->
        <div class="child">
          <label for="sibling-label-medium"
            >sibling native label
            <calcite-checkbox id="sibling-label-medium" name="medium-sibling-label" scale="m"></calcite-checkbox>
          </label>
        </div>

        <!-- large -->
        <div class="child">
          <label for="sibling-label-large"
            >sibling native label
            <calcite-checkbox id="sibling-label-large" name="large-sibling-label" scale="l"></calcite-checkbox>
          </label>
        </div>
      </div>
    </demo-dom-swapper>
  </body>
</html>