Tailwind CSS Switch for React - Material Tailwind

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.

Switch Colors

The Switch component comes with 19 different colors that you can change it using the color prop.

import { Switch } from "@material-tailwind/react";
 
export default function Colors() {
  return (
    <div className="flex w-max gap-4">
      <Switch id="blue" color="blue" defaultChecked />
      <Switch id="red" color="red" defaultChecked />
      <Switch id="green" color="green" defaultChecked />
      <Switch id="amber" color="amber" defaultChecked />
      <Switch id="teal" color="teal" defaultChecked />
      <Switch id="indigo" color="indigo" defaultChecked />
      <Switch id="purple" color="purple" defaultChecked />
      <Switch id="pink" color="pink" defaultChecked />
    </div>
  );
}

Switch with Label

You can add a label for the Switch component by passing the label prop to the Switch component.

Automatic Update

Switch Ripple Effect

You can turn on/off the ripple effect for the Switch component using the ripple prop.

Ripple Effect On

Ripple Effect Off

import { Switch } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="space-x-8">
      <Switch id="ripple-on" label="Ripple Effect On" ripple={true} />
      <Switch id="ripple-off" label="Ripple Effect Off" ripple={false} />
    </div>
  );
}

Tailwind CSS Switch - React

Switch Colors

Switch with Label

Switch Ripple Effect

Related

Props

Theme