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.

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''
shrinkbooleanMakes the input floated by default.false
inputRefrefAdd reference for input element.undefined

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