Tailwind CSS Input - Props

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

AttributeTypeDescriptionDefault
variantVariantChange input variantoutlined
sizeSizeChange input sizemd
colorColorChange input colorblue
labelstringAdd label for input''
errorbooleanChange input state to errorfalse
successbooleanChange input state to successfalse
iconnodeAdd icon for the inputundefined
labelPropsobjectAdd custom props for input labelundefined
containerPropsobjectAdd custom props for input containerundefined
classNamestringAdd custom className for input''


For TypeScript Only

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

Types - Variant

type variant = "standard" | "outlined" | "static";

Types - Size

type size = "md" | "lg";

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