Toggles

Switches - toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.

Primary

Secondary

Variations

Primary Toggles

Copy as:HTMLReact

Base size:

Primary basic

copydone

Primary disabled

copydone

Primary with helper textToggle can also have helper text

copydone

Large size:

Primary basic

copydone

Primary disabled

copydone

Primary with helper textToggle can also have helper text

copydone

<!-- Component: Base sized primary basic toggle button -->
<div class="relative flex flex-wrap items-center">
  <input class="relative w-8 h-4 transition-colors rounded-lg appearance-none cursor-pointer hover:bg-slate-400 after:hover:bg-slate-600 checked:hover:bg-emerald-300 checked:after:hover:bg-emerald-600 focus:outline-none checked:focus:bg-emerald-400 checked:after:focus:bg-emerald-700 focus-visible:outline-none peer bg-slate-300 after:absolute after:top-0 after:left-0 after:h-4 after:w-4 after:rounded-full after:bg-slate-500 after:transition-all checked:bg-emerald-200 checked:after:left-4 checked:after:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:after:bg-slate-300" type="checkbox" value="" id="id-c01" />
  <label class="pl-2 cursor-pointer text-slate-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400" for="id-c01">
    Primary basic
  </label>
</div>
<!-- End Base sized primary basic toggle button -->

Secondary Toggles

Copy as:HTMLReact

Base size:

Secondary basic

copydone

Secondary disabled

copydone

Secondary with helper textToggle can also have helper text

copydone

Large size:

Secondary basic

copydone

Secondary disabled

copydone

Secondary with helper textToggle can also have helper text

copydone

<!-- Component: Base sized secondary basic toggle button -->
<div class="relative flex flex-wrap items-center">
  <input class="relative w-8 h-4 transition-colors rounded-lg appearance-none cursor-pointer ring-2 ring-inset ring-slate-300 hover:ring-slate-400 after:hover:ring-slate-600 checked:hover:bg-emerald-300 checked:hover:ring-emerald-600 checked:after:hover:ring-emerald-600 checked:focus:bg-emerald-400 checked:focus:ring-emerald-700 checked:after:focus:ring-emerald-700 focus-visible:outline-none peer after:absolute after:top-0 after:left-0 after:h-4 after:w-4 after:rounded-full after:bg-white after:ring-2 after:ring-inset after:ring-slate-500 after:transition-all checked:bg-emerald-200 checked:ring-emerald-500 checked:after:left-4 checked:after:bg-white checked:after:ring-emerald-500 focus:outline-none disabled:cursor-not-allowed disabled:border-slate-200 disabled:after:ring-slate-300" type="checkbox" value="" id="id-c01s" />
  <label class="pl-2 cursor-pointer text-slate-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400" for="id-c01s">
    Secondary basic
  </label>
</div>
<!-- End Base sized secondary basic toggle button -->

Toggles with Icons

Copy as:HTMLReact

Primary:

With inner iconcopydone

With toggle iconcopydone

Secondary:

With inner iconcopydone

With toggle iconcopydone

<!-- Component: Lg sized primary toggle button with inner icon -->
<label class="relative flex flex-wrap items-center gap-2 cursor-pointer text-slate-500">
  <input class="relative w-12 h-6 transition-colors appearance-none cursor-pointer peer rounded-xl bg-slate-300 after:absolute after:left-0 after:top-0 after:h-6 after:w-6 after:rounded-full after:bg-slate-500 after:transition-all checked:bg-emerald-200 checked:after:left-6 checked:after:bg-emerald-500 hover:bg-slate-400 after:hover:bg-slate-600 checked:hover:bg-emerald-300 checked:after:hover:bg-emerald-600 focus:outline-none checked:focus:bg-emerald-400 checked:after:focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-slate-200 disabled:after:bg-slate-300" type="checkbox" value="" />
  <div class="flex absolute left-6 top-0.5 h-5 w-5 items-center justify-center text-slate-500 opacity-100 transition-opacity peer-checked:opacity-0 peer-hover:text-slate-600 peer-focus:text-slate-700">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
      <path fill-rule="evenodd" d="M4 7.379v-.904l6.743 6.742A3 3 0 0 1 5 12H3a1 1 0 0 1-1-1v-.586a1 1 0 0 1 .293-.707L3.56 8.44A1.5 1.5 0 0 0 4 7.38ZM6.5 12a1.5 1.5 0 0 0 3 0h-3Z" clip-rule="evenodd" />
      <path d="M14 11a.997.997 0 0 1-.096.429L4.92 2.446A4 4 0 0 1 12 5v2.379c0 .398.158.779.44 1.06l1.267 1.268a1 1 0 0 1 .293.707V11ZM2.22 2.22a.75.75 0 0 1 1.06 0l10.5 10.5a.75.75 0 1 1-1.06 1.06L2.22 3.28a.75.75 0 0 1 0-1.06Z" />
    </svg>
  </div>
  <div class="flex absolute left-1 top-0.5 h-5 w-5 items-center justify-center text-emerald-500 opacity-0 transition-opacity peer-checked:opacity-100 peer-hover:text-emerald-600 peer-focus:text-emerald-700">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
      <path fill-rule="evenodd" d="M12 5a4 4 0 0 0-8 0v2.379a1.5 1.5 0 0 1-.44 1.06L2.294 9.707a1 1 0 0 0-.293.707V11a1 1 0 0 0 1 1h2a3 3 0 1 0 6 0h2a1 1 0 0 0 1-1v-.586a1 1 0 0 0-.293-.707L12.44 8.44A1.5 1.5 0 0 1 12 7.38V5Zm-5.5 7a1.5 1.5 0 0 0 3 0h-3Z" clip-rule="evenodd" />
    </svg>
  </div>
  <span>With inner icon</span>
</label>
<!-- End Lg sized primary toggle button with inner icon -->

Day/Night Toggles

Copy as:HTMLReact

copydone

<!-- Component: Lg sized day/night toggle button -->
<div>
  <input type="checkbox" class="absolute peer -left-[65rem]" id="dn-toggle-bs" />
  <label for="dn-toggle-bs" class="toggle relative inline-block h-6 w-12 cursor-pointer overflow-clip rounded-full border border-sky-300 bg-sky-300 transition-colors duration-200 peer-checked:border-sky-800 peer-checked:bg-sky-800 peer-disabled:cursor-not-allowed peer-checked:[&_.crater]:opacity-100 peer-checked:[&_.star-1]:left-2 peer-checked:[&_.star-1]:top-3 peer-checked:[&_.star-1]:h-0.5 peer-checked:[&_.star-1]:w-0.5 peer-checked:[&_.star-2]:left-4 peer-checked:[&_.star-2]:top-1.5 peer-checked:[&_.star-2]:h-1 peer-checked:[&_.star-2]:w-1 peer-checked:[&_.star-3]:left-4 peer-checked:[&_.star-3]:top-4 peer-checked:[&_.star-3]:h-0.5 peer-checked:[&_.star-3]:w-0.5 peer-checked:[&_.toggle-handler]:-left-4 peer-checked:[&_.toggle-handler]:translate-x-10 peer-checked:[&_.toggle-handler]:rotate-0 peer-checked:[&_.toggle-handler]:bg-amber-100">
    <span class="toggle-handler relative left-0 top-0 z-10 inline-block h-6 w-6 -rotate-45 rounded-full bg-amber-300 shadow transition-all duration-[400ms]">
      <span class="absolute w-px h-px transition-opacity duration-200 rounded-full opacity-0 crater left-1 top-2 bg-amber-200"></span>
      <span class="crater absolute left-2.5 top-3.5 h-1 w-1 rounded-full bg-amber-200 opacity-0 transition-opacity duration-200"></span>
      <span class="crater absolute left-3 top-1 h-1.5 w-1.5 rounded-full bg-amber-200 opacity-0 transition-opacity duration-200"></span>
    </span>
    <span class="absolute w-4 h-4 transition-all duration-300 bg-white rounded-full star-1 left-3 top-4"></span>
    <span class="star-2 absolute left-6 top-3.5 h-4 w-4 rounded-full bg-white transition-all duration-300"></span>
    <span class="absolute w-5 h-5 transition-all duration-300 bg-white rounded-full star-3 left-9 top-2"></span>
    <span class="sr-only">toggle switch</span>
  </label>
</div>
<!-- End Lg sized day/night toggle button -->

Usage

Use switches to:

Toggle a single item on or off
Immediately activate or deactivate something

Specs

Toggles are created using the same markup as the normal checkboxes:

<input className=".." type="checkbox" value="" id="idname" /> <label className=".." for="idname"> Switch label </label>

And the only difference is the tailwind classes applied. They come in two basic styles (primary and secondary) and two sizes:

Base: 1rem (16px) height and 2rem (32px) wide.
Large: 1.5rem (24px) height and 3rem (48px) wide.

They can contain a helper text with a font size of 0.75rem (12px)

Accessibility notes

Since toggles are built with the native <input type="checkbox"> element no additional accessibility roles are required.

Toggles

Variations

Primary Toggles

Base size:

Large size:

Secondary Toggles

Base size:

Large size:

Toggles with Icons

Primary:

Secondary:

Day/Night Toggles

Usage

Specs

Accessibility notes

Check out the latest release!