Use our Tailwind CSS Switch component to let users adjust settings on/off. The option that the Switch controls, as well as the state it's in, should be made clear from the corresponding inline label.
See below our example that will help you create simple and easy-to-use Switch component for your Tailwind CSS and React project.
We provide different colors for Switch component like primary, secondary, info, success, warning, and error so you can adapt it easily to your needs. You can simply use the color prop to change the Switch component color.
In the example below, we've showcased the different colors for Switch component that you can use in your project.
import { Switch } from "@material-tailwind/react";
The Switch component can be used with a label to provide more context to the user. In the example below, we've added a label by using the Switch and Typography components together.
import { Switch, Typography } from "@material-tailwind/react";
const ID = "switch";
export function SwitchWithLabel() {
return (
<div className="flex items-center gap-2">
<Switch id={ID} />
<Typography
as="label"
htmlFor={ID}
className="text-foreground"
>
Dark Mode
</Typography>
</div>
);
}
import { Switch, Typography } from "@material-tailwind/react";
Use the example below to create a Switch component with a title and description as it's label to provide more information about the Switch component action.
import { Switch, Typography } from "@material-tailwind/react";