Tailwind CSS Radio Button - Theme

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

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

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

Radio Button Theme Object Type

interface RadioStylesType {
  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 { RadioStylesType } from "@material-tailwind/react";

Radio Button Theme Customization

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