Switch

A switch uses an input type="checkbox" with role="switch". Use it for an on/off setting.

#Native examples

<label>
  <input type="checkbox" role="switch" checked />
  Enable notifications
</label>
<label>
  <input type="checkbox" role="switch" />
  Enable updates
</label>
<label>
  <input type="checkbox" role="switch" disabled />
  Unavailable setting
</label>
<div>
  <label>
    <input
      type="checkbox"
      role="switch"
      aria-invalid="true"
      aria-describedby="switch-error"
    />
    Enable automatic updates
  </label>
  <small id="switch-error">Enable updates to continue.</small>
</div>

#Extension classes

The Full build adds trace-small and trace-large. Medium uses the default size.

<label>
  <input type="checkbox" role="switch" class="trace-small" />
  Small
</label>
<label>
  <input type="checkbox" role="switch" />
  Medium
</label>
<label>
  <input type="checkbox" role="switch" class="trace-large" />
  Large
</label>

Use trace-switch to wrap the switch and an optional decorative icon. Keep the input and icon as direct children of the wrapper.

<label>
  <span class="trace-switch">
    <input type="checkbox" role="switch" checked />
    <span class="trace-icon"><!-- @license lucide-static v1.70.0 - ISC -->
<svg focusable="false" aria-hidden="true"
 
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M20 6 9 17l-5-5" />
</svg>
</span>
  </span>
  Enable notifications
</label>

See CSS variables for styling.