Input

A styled text input component with label, validation, icons, and helper text support.

Import

import { Input } from '@/components/ui';

Basic Usage

<Input placeholder="Enter your name" />
<Input label="Email" type="email" />
<Input label="Password" type="password" error="Password is required" />

Props

Prop Type Default Description
label string - Input label text
error string - Error message (displays in red)
helperText string - Helper text below input
leftIcon ReactNode - Icon on the left side
rightIcon ReactNode - Icon on the right side
type 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number' | 'date' | ... 'text' Input type
disabled boolean false Disable input
className string - Additional CSS classes

With Label

<Input
  label="Email Address"
  type="email"
  placeholder="you@example.com"
/>

With Error

<Input
  label="Email"
  type="email"
  error="Please enter a valid email address"
/>

With Helper Text

<Input
  label="Username"
  helperText="Choose a unique username (3-20 characters)"
/>

With Icons

import { SearchIcon, EyeIcon } from '@/components/icons';

// Left icon
<Input
  leftIcon={<SearchIcon />}
  placeholder="Search..."
  type="search"
/>

// Right icon
<Input
  type="password"
  label="Password"
  rightIcon={<EyeIcon />}
/>

// Both icons
<Input
  leftIcon={<SearchIcon />}
  rightIcon={<ClearIcon />}
  placeholder="Search..."
/>

Input Types

// Text (default)
<Input type="text" placeholder="Enter text" />

// Email
<Input type="email" placeholder="you@example.com" />

// Password
<Input type="password" placeholder="••••••••" />

// Number
<Input type="number" placeholder="0" />

// Date
<Input type="date" />

// Search
<Input type="search" placeholder="Search..." />

Form Example

'use client';
import { useState } from 'react';
import { Input, Button } from '@/components/ui';

export function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});

  const handleSubmit = (e) => {
    e.preventDefault();
    // Validate and submit
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <Input
        label="Email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        error={errors.email}
        placeholder="you@example.com"
      />
      <Input
        label="Password"
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        error={errors.password}
        placeholder="Enter password"
      />
      <Button type="submit" color="blue" className="w-full">
        Sign In
      </Button>
    </form>
  );
}

Styling

The Input component uses consistent styling that matches other form components: