Tailwind CSS Checkbox - Theme

Learn how to customize the theme and styles for checkbox component, the theme object for checkbox component has three main objects:

A. The defaultProps object for setting up the default value for props of checkbox component.
B. The valid object for customizing the valid values for checkbox component props.
C. The styles object for customizing the theme and styles of checkbox component.

You can customize the theme and styles of checkbox component by adding Tailwind CSS classes as key paired values for objects.

Checkbox Theme Object Type

interface CheckboxStylesType {
  defaultProps: {
    color: string;
    label: string;
    icon: node;
    ripple: boolean;
    className: string;
    containerProps: object;
    labelProps: object;
  };
  valid: {
    colors: string[];
  };
  styles: {
    base: {
      root: object;
      container: object;
      input: object;
      label: object;
    };
    colors: object;
  };
}

For TypeScript Only

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

Checkbox Theme Customization

const theme = {
  checkbox: {
    styles: {
      root: {
        display: "inline-flex",
        alignItems: "items-center",
      },
    },
  },
};