Tailwind CSS Switch - React

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.

import { Switch } from "@material-tailwind/react";
 
export default function Example() {
  return <Switch defaultChecked />;
}

Switch Colors

The switch component comes with 19 different colors that you can change it using the color prop, below there are some examples of the colors but you can check all of the them here.

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

Props

The following props are available for the switch component. These are the custom props that come with we've added for the switch component and you can use all the other native input props as well.

Attribute	Type	Description	Default
`color`	Color	Change switch color	`blue`
`label`	`string`	Add label for switch	`''`
`ripple`	`boolean`	Add ripple effect for switch	`true`
`className`	`string`	Add custom className for switch	`''`
`containerProps`	`Object`	Add custom props for switch container	`undefined`
`labelProps`	`Object`	Add custom props for switch label	`undefined`
`circleProps`	`Object`	Add custom props for switch circle	`undefined`

Types

type color =
  | "blue-grey"
  | "grey"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

select

tabs