Toggles

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

Variations

Primary Toggles

Base size:

copydone
copydone
Toggle can also have helper text
copydone

Large size:

copydone
copydone
Toggle can also have helper text
copydone

Secondary Toggles

Base size:

copydone
copydone
Toggle can also have helper text
copydone

Large size:

copydone
copydone
Toggle can also have helper text
copydone

Toggles with Icons

Primary:

copydone
copydone

Secondary:

copydone
copydone

Day/Night Toggles

copydone
copydone

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.

Check out the latest release!