Switch

Toggle on or off like a light switch, ideal for binary decisions where a simple tap effortlessly changes states, providing clear and immediate control.

If you are using Tailwind v4, please refer to the 2.x documentation. This documentation assumes you are using Tailwind v3.

Switch

A switch is a toggle that flips between on and off, similar to a light switch.

Installation

If you hit any issues, make sure you check out the installation guide here.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Intents

By default, the switch uses the primary intent, but you can change it to other intents.

Controlled

You can manage the switch's state by setting the isSelected prop.

Dark Mode is disabled

Disabled

A disabled switch cannot be toggled and is non-interactive.