Tailwind CSS Checkbox - Props

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

AttributeTypeDescriptionDefault
colorColorChange checkbox colorblue
labelnodeAdd label for checkboxundefined
iconnodeChange checked icon for checkboxundefined
ripplebooleanAdd ripple effect for checkboxtrue
classNamestringAdd custom className for checkbox''
containerPropsobjectAdd custom props for checkbox containerundefined
labelPropsobjectAdd custom props for checkbox labelundefined
iconPropsobjectAdd custom props for checkbox iconundefined
inputRefrefAdd reference for input element.undefined


For TypeScript Only

import type { CheckboxProps } 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