switch.ejs

<div class="vert">
  <div>
    <h3 class="forge-typography--heading2">Default</h3>
    <forge-switch id="forge-switch-01" required aria-label="Active">
      <span>off/on</span>
    </forge-switch>
  </div>

  <div>
    <h3 class="forge-typography--heading2">CSS-based Switch</h3>
    <label class="forge-typography--label2" style="display: flex; align-items: center;">
      <div class="forge-switch">
        <input type="checkbox" switch />
        <div class="forge-switch__thumb">
          <forge-icon name="close" class="forge-switch__icon forge-switch__icon--off"></forge-icon>
          <forge-icon name="check" class="forge-switch__icon forge-switch__icon--on"></forge-icon>
        </div>
      </div>
      <span>CSS-based</span>
    </label>
  </div>

  <div>
    <h3 class="forge-typography--heading2">Default (start label)</h3>
    <forge-switch label-position="start">off/on</forge-switch>
  </div>

  <div>
    <h3 class="forge-typography--heading2">Dense</h3>
    <forge-switch dense>off/on</forge-switch>
  </div>

  <div>
    <h3 class="forge-typography--heading2">Disabled</h3>
    <forge-switch disabled>off/on</forge-switch>
  </div>

  <div>
    <h3 class="forge-typography--heading2">Disabled (checked)</h3>
    <forge-switch disabled checked>off/on</forge-switch>
  </div>

  <div>
    <h3 class="forge-typography--heading2">Readonly</h3>
    <forge-switch readonly>off/on</forge-switch>
  </div>

  <div>
    <h3 class="forge-typography--heading2">Custom icons</h3>
    <forge-switch icon="both">
      <span>sad/happy</span>
      <forge-icon slot="icon-off" name="emoticon_sad"></forge-icon>
      <forge-icon slot="icon-on" name="emoticon_happy"></forge-icon>
    </forge-switch>
  </div>

  <div>
    <h3 class="forge-typography--heading2">Custom styling</h3>
    <forge-switch class="custom-switch" label-position="start">off/on</forge-switch>
  </div>

  <div>
    <h3 class="forge-typography--heading2">Prevent default</h3>
    <forge-switch id="prevent-switch">off/on</forge-switch>
  </div>
</div>

<script type="module" src="switch.ts"></script>