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 props as well.

Attribute Type Description Default
variantVariant Change input variant outlined
sizeSize Change input size md
colorColor Change input color blue
labelstring Add label for input ''
errorboolean Change input state to error false
successboolean Change input state to success false

Types - Variant 

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

Types - Size 

type size = "md" | "lg"

Types - Color 

type variant = 
    | "blue-gray"
    | "gray"
    | "brown"
    | "deep-orange"
    | "orange"
    | "amber"
    | "yellow"
    | "lime"
    | "light-blue"
    | "blue"
    | "teal"
    | "cyan"
    | "light-blue"
    | "blue"
    | "indigo"
    | "deep-purple"
    | "purple"
    | "pink"
    | "red"

Related

Examples

Checkout different examples for input component.