Input

The following input component is a simple and minimal input component. You can use it as a single component and style it extensively by yourself if you desire. It takes in a label and placeholder and value as well as others for error handling and form validation. You can easily customize it more as per your needs.

Dependencies

No extra libraries required. Assuming you have Tailwind CSS installed

Usage

App.jsx

// App.jsx
import React, { useState } from 'react';
import Input from './components/input';

const App = () => {
  const [inputValue, setInputValue] = useState('');
  const [error, setError] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
    if (e.target.value.length < 3) {
      setError('Input must be at least 3 characters long.');
    } else {
      setError('');
    }
  };

  return (
    <div className="p-4">
      <h1 className="text-xl mb-4">Input Component Example</h1>
      <Input
        label="Name" type="text"
        placeholder="Enter your name"
        value={inputValue}
        onChange={handleChange}
        error={error}
      />
      <Input
        label="Email" type="email" value=""
        placeholder="Enter your email"
        onChange={() => { }}
      />
    </div>
  );
};

export default App;

Component

input.jsx

// Input.jsx
import React from 'react';

const Input = ({
  type = 'text',
  placeholder = '',
  value,
  onChange,
  className = '',
  label = '',
  error = '',
}) => {
  return (
    <div className={`flex flex-col mb-4 ${className}`}>
      {label && <label className="mb-1 text-gray-700">{label}</label>}
      <input
        type={type}
        placeholder={placeholder}
        value={value}
        onChange={onChange}
        className={`border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 ${
          error ? 'border-red-500' : ''
        }`}
      />
      {error && <span className="text-red-500 text-sm mt-1">{error}</span>}
    </div>
  );
};

export default Input;