Reusable React Input Component with Tailwind CSS (Icon, Label & Error)

When building forms in React, an input component is one of the most essential UI elements. A well-designed input field improves user experience and ensures validation. This guide provides a reusable input component styled with Tailwind CSS, offering multiple styles:

• With Error Handling – Displays validation errors.
• Outlined Style – A modern input with a border.
• Filled Style – A clean, minimal look with a background fill.

This component supports props like icon, label, and error, making it highly customizable for various use cases.

Input Component Props

The input component is built with TypeScript and includes the following props:

1interface InputProps {
2  type: 'text' | 'number' | 'email' | 'password'
3  label?: string
4  value: string | number
5  name: string
6  placeholder: string
7  error?: string
8  disabled?: boolean
9  icon?: React.ReactNode
10  onChange: (e: ChangeEvent<HTMLInputElement>) => void
11}

Features

✅ Supports multiple input types – text, email, number, and password.

✅ Optional label & placeholder – Helps users understand what to enter.

✅ Error Handling – Displays a validation message.

✅ Optional Icon Support – Adds an icon inside the input.

✅ Disabled State – Prevents input when needed.

Tailwind CSS Input with Error

This is how the component looks with and without error:

Code Implementation

If you want to learn how to build input component step by step, read the React reusable input component tutorial.

Tailwind CSS Outlined Input

Visual Characteristics

• Transparent background
• Defined border
• Optional left icon

Code Implementation

Tailwind CSS Filled Input

Visual Characteristics

• Solid background (#F6F5F5)
• Borderless design
• Subtle focus states

Code Implementation

React Input Component API

Input Component Use Cases

1. Login & Signup Forms – Collect user emails, passwords, etc.
2. Search Bars – Add an icon for a better UI experience.
3. User Profile Forms – Input fields for updating user information.
4. E-commerce Checkout – Collect user details like name, email, and phone number.

Don't forget to let me know if it helps you.