Switch

A control that allows the user to toggle between checked and not checked.

With UnoCSS

Usage

Basic

<label switch="~ theme-400 dark:theme-500">
  <input
    class="peer" // Add peer class to the input element
    type="checkbox"
  />
  <span switch-dot />
</label>

Color

We have built-in theme color for the active state, you can initialize the color by adding switch-default, or use switch-anycolor to customize the color.

<label switch="~ default">
  <input  class="peer" type="checkbox" />
  <span switch-dot />
</label>
<label switch="~ red dark:purple">
  <input  class="peer" type="checkbox" />
  <span switch-dot />
</label>

Size

Default size is md, you can use switch-xs|sm|md|lg to change the size.

<label switch="~ md theme-400">
  <input  class="peer" type="checkbox" />
  <span switch-dot />
</label>

Disabled

<label switch="~ theme-400">
  <input  class="peer" type="checkbox" disabled />
  <span switch-dot />
</label>

Compose

<label switch="~ theme-400">
  <input v-model="checked" class="peer" type="checkbox">
  <div switch-dot important:bg-op-50>
    <i :class="checked ? 'i-carbon-moon' : 'i-carbon-sun'" />
  </div>
</label>

OFF

With Vue

TODO