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.
The Input
component comes with 3 different variants that you can change it using the variant
prop.
The Input
component comes with 2 different sizes that you can change it using the size
prop.
The Input
component comes with 21 different colors that you can change it using the color
prop.
The Input
component comes with error and success states for performing validations.
You can add icon for the Input
component using the icon
prop.
Use the example below for an input with a helper text.
Use at least 8 characters, one uppercase, one lowercase and one number.
Use the example below for an input containing a button inside.
Use the example below for an input containing a countries code dropdown.
An Input
could be disabled as well, it will help you to prevent user interactions like click or focus over the Input
component.