Tailwind CSS Input - React

Easily create Input with different statuses and sizes using our components based on Tailwind CSS and React.

Input fields are an essential user interface design element, providing users with the means to enter non-standardized responses.

See below our Input component examples. It comes in different styles and colors, so you can adapt it easily to your needs.



Input Variants

The Input component comes with 3 different variants that you can change it using the variant prop.


Input Sizes

The Input component comes with 2 different sizes that you can change it using the size prop.


Input Colors

The Input component comes with 21 different colors that you can change it using the color prop.


Input Validations

The Input component comes with error and success states for performing validations.


Input With Icon

You can add icon for the Input component using the icon prop.


Input With Helper Text

Use the example below for an input with a helper text.

Use at least 8 characters, one uppercase, one lowercase and one number.


Input With Button

Use the example below for an input containing a button inside.


Input With Dropdown

Use the example below for an input containing a countries code dropdown.


Disabled Input

An Input could be disabled as well, it will help you to prevent user interactions like click or focus over the Input component.

Edit this page on Github