React Tailwind Input Component [Label + Error]

Whenever we want the user to insert some value in the application, we need a form element, and the input is the most essential part of the form. In this piece of content, you will find Tailwind CSS code for an input component with all the necessary props, including label and error.

We are tackling 7 props in this input component using TypeScript.

Copy
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  onChange: (e: ChangeEvent<HTMLInputElement>) => void
10}

We are also displaying the optional label and error.

This is how the component looks with and without error:

Tailwind CSS Input Component Code

Copy
1import { ChangeEvent, FC } from 'react'
2
3interface InputProps {
4  type: 'text' | 'number' | 'email' | 'password'
5  label?: string
6  value: string | number
7  name: string
8  placeholder: string
9  error?: string
10  disabled?: boolean
11  onChange: (e: ChangeEvent<HTMLInputElement>) => void
12}
13
14const Input: FC<InputProps> = ({
15  type = 'text',
16  label,
17  value,
18  name,
19  placeholder,
20  error,
21  disabled,
22  onChange,
23}) => {
24  return (
25    <div className="mb-4">
26      <label
27        htmlFor={label}
28        className="block text-slate-700 font-medium text-sm mb-1.5"
29      >
30        {label}
31      </label>
32      <input
33        className={`border text-slate-700 border-gray-300 shadow-sm rounded-lg w-full py-2.5 px-3 placeholder-gray-500 text-base outline-blue-300 ${
34          error && 'ring-2 ring-red-200'
35        }`}
36        type={type}
37        id={label}
38        value={value}
39        name={name}
40        placeholder={placeholder}
41        onChange={onChange}
42        disabled={disabled}
43      />
44      {error && (
45        <span role="alert" className="block text-red-600 text-sm ml-3 mt-1">
46          {error}
47        </span>
48      )}
49    </div>
50  )
51}
52
53export default Input

How to use in parent Component

To test the component, we need to wrap input component inside a form element, which will have a submit button too.

The input has a full width. We will adjust its width by putting it inside a wrapper. Below, I provide a form element with max-w-80, which is equivalent to 320px.

Copy
1import { ChangeEvent, FormEvent, useState } from 'react'
2import Input from './components/input'
3
4function App() {
5  const [email, setEmail] = useState<string>('')
6  const [error, setError] = useState<string>('')
7
8  const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
9    setEmail(e.target.value)
10  }
11
12  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
13    event.preventDefault()
14    if (!email) {
15      setError('Please enter a valid email.')
16    } else {
17      console.log('email', email)
18      setError('')
19      // Handle form submission
20    }
21  }
22
23  return (
24    <>
25      <div className="max-w-6xl mx-auto px-3">
26        <form onSubmit={handleSubmit} className="max-w-80 mt-10">
27          <Input
28            type="email"
29            label="Email"
30            name="email"
31            placeholder="Please enter your email"
32            value={email}
33            onChange={handleChange}
34            error={error}
35          />
36          <button
37            type="submit"
38            className="text-neutral-800 rounded-lg border border-neutral-800 bg-transparent px-2 py-1 min-w-[140px] mt-4 hover:bg-gray-200 hover:border-gray-400 "
39          >
40            Submit
41          </button>
42        </form>
43      </div>
44    </>
45  )
46}
47
48export default App

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

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