Switch

Switches or Toggles are a special type of input widget that can be used to switch between two states. They are commonly used in forms to toggle between different options or settings. Toggles can be used as an input element or as a button element.

Design Hints

Toggles are a great way to provide users with a quick and easy way to switch between different options or settings. They are also a good way to save space on a form and make it more visually appealing.

Accessiblity Hints

For accessibility, it is important to ensure that the toggles are keyboard accessible. ravixUI uses an input type checkbox with role switch and labels to make the toggles accessible. While sr-only text has been added to the labels, in most cases you would use a visible label to describe the toggle.

Simple Switch

A simple switch input to toggle between two states.

<div class="flex flex-wrap items-center justify-center space-x-8">
  <label
    for="switchOne"
    class="flex cursor-pointer items-center dark:text-white"
  >
    <div class="relative">
      <input
        type="checkbox"
        id="switchOne"
        class="peer sr-only"
        role="switch"
        aria-labelledby="Toggle-Label-1"
      />
      <div
        class="block h-6 w-12 rounded-full bg-gray-400 ring-offset-4 ring-offset-gray-50 peer-checked:bg-indigo-300 peer-focus:ring-2 peer-focus:ring-indigo-600 motion-safe:transition-colors motion-safe:duration-300 dark:bg-zinc-600 dark:ring-offset-zinc-950"
      >
      </div>
      <div
        class="absolute left-0 top-0 h-6 w-6 rounded-full bg-gray-300 ring-1 ring-inset ring-indigo-600 peer-checked:translate-x-full peer-checked:bg-indigo-800 peer-checked:ring-0 motion-safe:transition motion-safe:duration-300 dark:bg-zinc-400 dark:ring-0"
      >
      </div>
      <span id="Toggle-Label-1" class="sr-only">Toggle One</span>
    </div>
  </label>

  <label
    for="switchTwo"
    class="flex cursor-pointer items-center dark:text-white"
  >
    <div class="relative">
      <input
        type="checkbox"
        id="switchTwo"
        class="peer sr-only"
        role="switch"
        aria-labelledby="Toggle-Label-2"
      />
      <div
        class="block h-4 w-12 rounded-full bg-gray-400 ring-offset-[6px] ring-offset-gray-50 peer-checked:bg-indigo-300 peer-focus:ring-2 peer-focus:ring-indigo-600 motion-safe:transition-colors motion-safe:duration-300 dark:bg-zinc-600 dark:ring-offset-zinc-950"
      >
      </div>
      <div
        class="absolute -top-1 left-0 h-6 w-6 rounded-full bg-gray-200 ring-1 ring-inset ring-indigo-600 peer-checked:translate-x-full peer-checked:bg-indigo-800 peer-checked:ring-0 motion-safe:transition motion-safe:duration-300 dark:bg-zinc-400 dark:ring-0 dark:peer-checked:bg-indigo-600"
      >
      </div>
      <span id="Toggle-Label-2" class="sr-only">Toggle Two</span>
    </div>
  </label>
  <label for="switchThree" class="flex cursor-pointer items-center">
    <div class="relative">
      <input
        type="checkbox"
        id="switchThree"
        class="peer sr-only"
        role="switch"
        aria-labelledby="Toggle-Label-3"
      />
      <div
        class="block h-7 w-12 rounded-full bg-gray-400 ring-offset-2 ring-offset-gray-50 peer-checked:bg-indigo-300 peer-focus:ring-2 peer-focus:ring-indigo-600 motion-safe:transition-colors motion-safe:duration-300 dark:bg-zinc-600 dark:ring-offset-zinc-950"
      >
      </div>
      <div
        class="absolute left-1 top-1 h-5 w-5 rounded-full bg-gray-200 ring-1 ring-inset ring-indigo-600 peer-checked:translate-x-full peer-checked:bg-indigo-800 peer-checked:ring-0 motion-safe:transition motion-safe:duration-300 dark:bg-zinc-400 dark:ring-0"
      >
      </div>
      <span id="Toggle-Label-3" class="sr-only">Toggle Three</span>
    </div>
  </label>
</div>

<div class="flex flex-wrap items-center justify-center space-x-8">
  <label
    for="switchOne"
    class="flex cursor-pointer items-center dark:text-white"
  >
    <div class="relative">
      <input
        type="checkbox"
        id="switchOne"
        class="peer sr-only"
        role="switch"
        aria-labelledby="Toggle-Label-1"
      />
      <div
        class="block h-6 w-12 rounded-full bg-gray-400 ring-offset-4 ring-offset-gray-50 peer-checked:bg-indigo-300 peer-focus:ring-2 peer-focus:ring-indigo-600 motion-safe:transition-colors motion-safe:duration-300 dark:bg-zinc-600 dark:ring-offset-zinc-950"
      >
      </div>
      <div
        class="absolute left-0 top-0 h-6 w-6 rounded-full bg-gray-300 ring-1 ring-inset ring-indigo-600 peer-checked:translate-x-full peer-checked:bg-indigo-800 peer-checked:ring-0 motion-safe:transition motion-safe:duration-300 dark:bg-zinc-400 dark:ring-0"
      >
      </div>
      <span id="Toggle-Label-1" class="sr-only">Toggle One</span>
    </div>
  </label>

  <label
    for="switchTwo"
    class="flex cursor-pointer items-center dark:text-white"
  >
    <div class="relative">
      <input
        type="checkbox"
        id="switchTwo"
        class="peer sr-only"
        role="switch"
        aria-labelledby="Toggle-Label-2"
      />
      <div
        class="block h-4 w-12 rounded-full bg-gray-400 ring-offset-[6px] ring-offset-gray-50 peer-checked:bg-indigo-300 peer-focus:ring-2 peer-focus:ring-indigo-600 motion-safe:transition-colors motion-safe:duration-300 dark:bg-zinc-600 dark:ring-offset-zinc-950"
      >
      </div>
      <div
        class="absolute -top-1 left-0 h-6 w-6 rounded-full bg-gray-200 ring-1 ring-inset ring-indigo-600 peer-checked:translate-x-full peer-checked:bg-indigo-800 peer-checked:ring-0 motion-safe:transition motion-safe:duration-300 dark:bg-zinc-400 dark:ring-0 dark:peer-checked:bg-indigo-600"
      >
      </div>
      <span id="Toggle-Label-2" class="sr-only">Toggle Two</span>
    </div>
  </label>
  <label for="switchThree" class="flex cursor-pointer items-center">
    <div class="relative">
      <input
        type="checkbox"
        id="switchThree"
        class="peer sr-only"
        role="switch"
        aria-labelledby="Toggle-Label-3"
      />
      <div
        class="block h-7 w-12 rounded-full bg-gray-400 ring-offset-2 ring-offset-gray-50 peer-checked:bg-indigo-300 peer-focus:ring-2 peer-focus:ring-indigo-600 motion-safe:transition-colors motion-safe:duration-300 dark:bg-zinc-600 dark:ring-offset-zinc-950"
      >
      </div>
      <div
        class="absolute left-1 top-1 h-5 w-5 rounded-full bg-gray-200 ring-1 ring-inset ring-indigo-600 peer-checked:translate-x-full peer-checked:bg-indigo-800 peer-checked:ring-0 motion-safe:transition motion-safe:duration-300 dark:bg-zinc-400 dark:ring-0"
      >
      </div>
      <span id="Toggle-Label-3" class="sr-only">Toggle Three</span>
    </div>
  </label>
</div>

Alternate Simple Switch

An alternate style for simple switches.

<div class="flex h-24 flex-wrap items-center justify-center space-x-8">
  <label for="alt-toggleOne" class="flex cursor-pointer items-center">
    <div class="relative">
      <input
        type="checkbox"
        id="alt-toggleOne"
        class="peer sr-only"
        role="switch"
        aria-labelledby="Alt-Toggle-Label-1"
      />
      <div
        class="block h-6 w-12 rounded-full bg-gray-300 ring-offset-4 ring-offset-gray-50 transition-colors duration-300 peer-checked:bg-gray-500 peer-focus:ring-2 peer-focus:ring-indigo-600 dark:bg-zinc-800 dark:ring-offset-zinc-950 dark:peer-checked:bg-zinc-500"
      >
      </div>
      <div
        class="absolute left-0 top-0 h-6 w-6 rounded-full bg-gray-300 ring-1 ring-inset ring-indigo-600 transition duration-300 peer-checked:translate-x-full dark:bg-zinc-300 dark:ring-0"
      >
      </div>
      <span id="Alt-Toggle-Label-1" class="sr-only">Toggle One</span>
    </div>
  </label>

  <label
    for="alt-toggleTwo"
    class="flex cursor-pointer items-center dark:text-white"
  >
    <div class="relative">
      <input
        type="checkbox"
        id="alt-toggleTwo"
        class="peer sr-only"
        role="switch"
        aria-labelledby="Alt-Toggle-Label-2"
      />
      <div
        class="block h-4 w-12 rounded-full bg-gray-300 ring-offset-[6px] ring-offset-gray-50 transition-colors duration-300 peer-checked:bg-gray-500 peer-focus:ring-2 peer-focus:ring-indigo-600 dark:bg-zinc-800 dark:ring-offset-zinc-950 dark:peer-checked:bg-zinc-500"
      >
      </div>
      <div
        class="absolute -top-1 left-0 h-6 w-6 rounded-full bg-gray-200 ring-1 ring-inset ring-indigo-600 transition duration-300 peer-checked:translate-x-full dark:bg-zinc-300 dark:ring-0"
      >
      </div>
      <span id="Alt-Toggle-Label-2" class="sr-only">Toggle Two</span>
    </div>
  </label>
  <label for="alt-toggleThree" class="flex cursor-pointer items-center">
    <div class="relative">
      <input
        type="checkbox"
        id="alt-toggleThree"
        class="peer sr-only"
        role="switch"
        aria-labelledby="Alt-Toggle-Label-3"
      />
      <div
        class="block h-7 w-12 rounded-full bg-gray-300 ring-offset-2 ring-offset-gray-50 transition-colors duration-300 peer-checked:bg-gray-500 peer-focus:ring-2 peer-focus:ring-indigo-600 dark:bg-zinc-800 dark:ring-offset-zinc-950 dark:peer-checked:bg-zinc-500"
      >
      </div>
      <div
        class="absolute left-1 top-1 h-5 w-5 rounded-full bg-gray-200 ring-1 ring-inset ring-indigo-600 transition duration-300 peer-checked:translate-x-full peer-checked:ring-0 dark:bg-zinc-300 dark:ring-0"
      >
      </div>
      <span id="Alt-Toggle-Label-3" class="sr-only">Toggle Three</span>
    </div>
  </label>
</div>

<div class="flex h-24 flex-wrap items-center justify-center space-x-8">
  <label for="alt-toggleOne" class="flex cursor-pointer items-center">
    <div class="relative">
      <input
        type="checkbox"
        id="alt-toggleOne"
        class="peer sr-only"
        role="switch"
        aria-labelledby="Alt-Toggle-Label-1"
      />
      <div
        class="block h-6 w-12 rounded-full bg-gray-300 ring-offset-4 ring-offset-gray-50 transition-colors duration-300 peer-checked:bg-gray-500 peer-focus:ring-2 peer-focus:ring-indigo-600 dark:bg-zinc-800 dark:ring-offset-zinc-950 dark:peer-checked:bg-zinc-500"
      >
      </div>
      <div
        class="absolute left-0 top-0 h-6 w-6 rounded-full bg-gray-300 ring-1 ring-inset ring-indigo-600 transition duration-300 peer-checked:translate-x-full dark:bg-zinc-300 dark:ring-0"
      >
      </div>
      <span id="Alt-Toggle-Label-1" class="sr-only">Toggle One</span>
    </div>
  </label>

  <label
    for="alt-toggleTwo"
    class="flex cursor-pointer items-center dark:text-white"
  >
    <div class="relative">
      <input
        type="checkbox"
        id="alt-toggleTwo"
        class="peer sr-only"
        role="switch"
        aria-labelledby="Alt-Toggle-Label-2"
      />
      <div
        class="block h-4 w-12 rounded-full bg-gray-300 ring-offset-[6px] ring-offset-gray-50 transition-colors duration-300 peer-checked:bg-gray-500 peer-focus:ring-2 peer-focus:ring-indigo-600 dark:bg-zinc-800 dark:ring-offset-zinc-950 dark:peer-checked:bg-zinc-500"
      >
      </div>
      <div
        class="absolute -top-1 left-0 h-6 w-6 rounded-full bg-gray-200 ring-1 ring-inset ring-indigo-600 transition duration-300 peer-checked:translate-x-full dark:bg-zinc-300 dark:ring-0"
      >
      </div>
      <span id="Alt-Toggle-Label-2" class="sr-only">Toggle Two</span>
    </div>
  </label>
  <label for="alt-toggleThree" class="flex cursor-pointer items-center">
    <div class="relative">
      <input
        type="checkbox"
        id="alt-toggleThree"
        class="peer sr-only"
        role="switch"
        aria-labelledby="Alt-Toggle-Label-3"
      />
      <div
        class="block h-7 w-12 rounded-full bg-gray-300 ring-offset-2 ring-offset-gray-50 transition-colors duration-300 peer-checked:bg-gray-500 peer-focus:ring-2 peer-focus:ring-indigo-600 dark:bg-zinc-800 dark:ring-offset-zinc-950 dark:peer-checked:bg-zinc-500"
      >
      </div>
      <div
        class="absolute left-1 top-1 h-5 w-5 rounded-full bg-gray-200 ring-1 ring-inset ring-indigo-600 transition duration-300 peer-checked:translate-x-full peer-checked:ring-0 dark:bg-zinc-300 dark:ring-0"
      >
      </div>
      <span id="Alt-Toggle-Label-3" class="sr-only">Toggle Three</span>
    </div>
  </label>
</div>

Accessibility Testing Status

Component	NVDA	Windows Narrator	WAVE	Axe	IBM Equal Access
Simple Switch	Yes	Yes	Yes	Yes	Partial*
Alternate Simple Switch	Yes	Yes	Yes	Yes	Partial*

*The IBM Equal Access Accessibility Checker shows errors for missing aria-checked attribute even though its an input type checkbox with a role switch. If an aria-checked attribute is added, it would be double dipping since input type checkbox already conveys if it is checked or not.

For more information on the implementation of the switches, you can refer to the ARIA Authoring Practices Guide for Switch pattern