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 -->

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:

Usage

Specs

Accessibility notes

Check out the latest release!