Tailwind CSS Switch - Props

The following props are available for 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.

colorColorChange switch colorblue
labelnodeAdd label for switchundefined
ripplebooleanAdd ripple effect for switchtrue
classNamestringAdd custom className for switch''
containerPropsobjectAdd custom props for switch containerundefined
labelPropsobjectAdd custom props for switch labelundefined
circlePropsobjectAdd custom props for switch circleundefined
inputRefrefAdd reference for input element.undefined

For TypeScript Only

import type { SwitchProps } from "@material-tailwind/react";

Types - Color

type color =
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";
Edit this page on Github