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 Demo
Here's how to implement a simple and responsive Input component. It is perfect for forms requiring text input, such as user registration, login forms, or any form where users need to input a username.
Input Sizes
We provide different input sizes like sm, md, and lg so you can adapt it easily to your needs. You can simply use the size prop to change the input size.
In the example below, we've showcased the different input sizes that you can use in your project.
Input Color
We provide different input colors like primary, secondary, info, success, warning, and error so you can adapt it easily to your needs. You can simply use the color prop to change the input color.
In the example below, we've showcased the different input colors that you can use in your project.
Input with Validation
We provide helpful props like isError and isSuccess for showing error and success states of an input. In the example below, we've showcased the Input component with error and success states that you can use in your project.
Input with Icon
You can add an icon to the start or end of the input to make it more visually appealing and informative. Use the example below to create inputs with icon.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
Input with Label
The Input component can be used with a label to provide more context to the user. In the example below, we've added a label to the input by using the Input and Typography components together.
Input with Helper Text
You can use Input and Typography components together to provide more details for the input. In the example below, we've added a hint text with an icon below the input field to provide more context to the user.
Input with Button
You can use Input and Button components together for submitting the input data. In the example below, we've created a subscription form using Input and Button components.
Input with Dropdown
You can use Input and Menu components together for creating more complex input fields. In the example below, we've created an input with a dropdown for selecting the country code and typing mobile number.
In the example below we've used the use-react-countries library, for getting the countries name, flag and country-code.
Input Disabled
You can disable the input by adding the disabled prop. This will prevent the user from interacting with the input field.
Input Custom Styles
You can use className prop to customize the Input component style. In the example below, we make a simple input field with an icon and a border to it's bottom.
