1. Components
  2. Switch

Basic Forms

Tailwind CSS Switch/Toggle

A toggle is used to view or switch between enabled or disabled states.

Attention needed

By default Preline UI uses Tailwind CSS Forms plugin. Don't forget to install it!

Example

The default form of a toggle.

With description

The basic usage with description.

Disabled

Disabled switch.

Sizes New

Switches stacked small to large sizes.

With Icons New

You can also add additional elements, such as icons.

Solid color variant New

Where the thumb color is white on active.

With icons too.

Soft color variant New

Soft style switch options.

With icons too.

With tooltip

In this example we have added a tooltip to the switcher.

Validation states

It provides valuable, actionable feedback to your users with HTML5 form validation.