Toggle - JS + CSS

Toggle

Struktur HTML


<div class="ina-toggle ina-toggle--size-md">
  <input type="checkbox" class="ina-toggle__input" id="toggle-input" />
  <label for="toggle-input" class="ina-toggle__label">
    <span class="ina-toggle__track">
      <span class="ina-toggle__thumb"></span>
    </span>
  </label>
</div>

Contoh Penggunaan

Contoh 1

Small

Medium (checked)

Disabled

<div
  id="toggle-variant-first-container"
  style="padding: 20px; display: flex; flex-direction: column; gap: 24px;"
>
  <div style="display: flex; align-items: center; gap: 12px;">
    <div
      class="ina-toggle ina-toggle--size-sm"
      role="switch"
      aria-checked="false"
      tabindex="0"
      aria-label="Small toggle"
    >
      <input type="checkbox" class="ina-toggle__input" id="toggle-sm" tabindex="-1" />
      <div class="ina-toggle__track" style="pointer-events: none;">
        <div class="ina-toggle__thumb"></div>
      </div>
    </div>
    <span>Small</span>
  </div>

  <div style="display: flex; align-items: center; gap: 12px;">
    <div
      class="ina-toggle ina-toggle--size-md ina-toggle--checked"
      role="switch"
      aria-checked="true"
      tabindex="0"
      aria-label="Medium toggle"
    >
      <input type="checkbox" class="ina-toggle__input" id="toggle-md" checked tabindex="-1" />
      <div class="ina-toggle__track ina-toggle__track--checked" style="pointer-events: none;">
        <div class="ina-toggle__thumb ina-toggle__thumb--checked"></div>
      </div>
    </div>
    <span>Medium (checked)</span>
  </div>

  <div style="display: flex; align-items: center; gap: 12px;">
    <div
      class="ina-toggle ina-toggle--size-md ina-toggle--disabled"
      role="switch"
      aria-checked="false"
      tabindex="-1"
      aria-label="Disabled toggle"
    >
      <input
        type="checkbox"
        class="ina-toggle__input"
        id="toggle-disabled"
        disabled
        tabindex="-1"
      />
      <div class="ina-toggle__track ina-toggle__track--disabled" style="pointer-events: none;">
        <div class="ina-toggle__thumb ina-toggle__thumb--disabled"></div>
      </div>
    </div>
    <span>Disabled</span>
  </div>
</div>

<script is:inline>
  document.addEventListener('astro:page-load', () => {
    if (window.InaUI && window.InaUI.initToggle) {
      window.InaUI.initToggle('#toggle-variant-first-container .ina-toggle');
    }
  });

  // Also run on simple load for robustness if View Transitions aren't fully intercepting initial load
  if (window.InaUI && window.InaUI.initToggle) {
    window.InaUI.initToggle('#toggle-variant-first-container .ina-toggle');
  } else {
    // Retry if script loaded later
    window.addEventListener('load', () => {
      if (window.InaUI && window.InaUI.initToggle) {
        window.InaUI.initToggle('#toggle-variant-first-container .ina-toggle');
      }
    });
  }
</script>

Contoh 2

Enable notifications

Email notifications

SMS notifications

<div
  id="toggle-variant-two-container"
  style="padding: 20px; display: flex; flex-direction: column; gap: 16px;"
>
  <div style="display: flex; align-items: center; justify-content: space-between; width: 300px;">
    <label for="toggle-notifications">Enable notifications</label>
    <div
      class="ina-toggle ina-toggle--size-md"
      role="switch"
      aria-checked="false"
      tabindex="0"
      aria-label="Enable notifications"
    >
      <input type="checkbox" class="ina-toggle__input" id="toggle-notifications" tabindex="-1" />
      <div class="ina-toggle__track" style="pointer-events: none;">
        <div class="ina-toggle__thumb"></div>
      </div>
    </div>
  </div>

  <div style="display: flex; align-items: center; justify-content: space-between; width: 300px;">
    <label for="toggle-email">Email notifications</label>
    <div
      class="ina-toggle ina-toggle--size-md ina-toggle--checked"
      role="switch"
      aria-checked="true"
      tabindex="0"
      aria-label="Email notifications"
    >
      <input type="checkbox" class="ina-toggle__input" id="toggle-email" checked tabindex="-1" />
      <div class="ina-toggle__track ina-toggle__track--checked" style="pointer-events: none;">
        <div class="ina-toggle__thumb ina-toggle__thumb--checked"></div>
      </div>
    </div>
  </div>

  <div style="display: flex; align-items: center; justify-content: space-between; width: 300px;">
    <label for="toggle-sms">SMS notifications</label>
    <div
      class="ina-toggle ina-toggle--size-md ina-toggle--disabled"
      role="switch"
      aria-checked="false"
      tabindex="-1"
      aria-label="SMS notifications"
    >
      <input type="checkbox" class="ina-toggle__input" id="toggle-sms" disabled tabindex="-1" />
      <div class="ina-toggle__track ina-toggle__track--disabled" style="pointer-events: none;">
        <div class="ina-toggle__thumb ina-toggle__thumb--disabled"></div>
      </div>
    </div>
  </div>
</div>

<script is:inline>
  document.addEventListener('astro:page-load', () => {
    if (window.InaUI && window.InaUI.initToggle) {
      window.InaUI.initToggle('#toggle-variant-two-container .ina-toggle');
    }
  });

  // Also run on simple load for robustness
  if (window.InaUI && window.InaUI.initToggle) {
    window.InaUI.initToggle('#toggle-variant-two-container .ina-toggle');
  } else {
    window.addEventListener('load', () => {
      if (window.InaUI && window.InaUI.initToggle) {
        window.InaUI.initToggle('#toggle-variant-two-container .ina-toggle');
      }
    });
  }
</script>