Tailwind CSS Input - Theme

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

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

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



Input Theme Object Type

Variant of Input component theme has a specific type of Input Variant Styles Type

interface InputStylesType {
  defaultProps: {
    variant: string;
    size: string;
    color: string;
    label: string;
    error: boolean;
    success: boolean;
    icon: node;
    labelProps: object;
    className: string;
  };
  valid: {
    variants: string[];
    sizes: string[];
    colors: string[];
  };
  styles: {
    base: {
      container: object;
      input: object;
      label: object;
      icon: object;
    };
    variants: {
      outlined: InputVariantStylesType;
      standard: InputVariantStylesType;
      static: InputVariantStylesType;
    };
  };
}


For TypeScript Only

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

Theme Object Type - Input Variant

Input variant object type contains two specific types of Input Size Styles Type and Input State Styles Type

interface InputVariantStylesType {
  base: {
    input: object;
    inputWithIcon: object;
    icon: object;
    label: object;
  };
  sizes: {
    md: InputSizeStylesType;
    lg: InputSizeStylesType;
  };
  colors: {
    input: object;
    label: object;
  };
  error: InputStateStylesType;
  success: InputStateStylesType;
}


For TypeScript Only

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

Theme Object Type - Input Size

interface InputSizeStylesType {
  container: object;
  input: object;
  label: object;
  icon: object;
}


For TypeScript Only

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

Theme Object Type - Input State

interface InputStateStylesType {
  input: object;
  label: object;
}


For TypeScript Only

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

Input Theme Customization

const theme = {
  input: {
    styles: {
      base: {
        container: {
          position: "relative",
          width: "w-full",
          minWidth: "min-w-[200px]",
        },
      },
    },
  },
};

Related

Examples

Checkout different examples for input component.

Props

Learn more about props definition and types of input component.

Edit this page on Github