Input

Ready

Form input with validation states, icon support, and multiple sizes

Variants

Default, filled, and error states

Best for search bars and embedded inputs

This field is required

Sizes

Small, medium, and large input sizes

With Icons

Add icons to the left or right of the input

Input Types

Different HTML input types

Usage

How to use the Input component

// Basic Input
<Input placeholder="Enter text..." />

// With Size
<Input inputSize="sm" placeholder="Small" />
<Input inputSize="md" placeholder="Medium" />
<Input inputSize="lg" placeholder="Large" />

// With Error State
<Input variant="error" placeholder="Invalid input" />

// With Left Icon
<Input
  leftIcon={<Search className="w-4 h-4" />}
  placeholder="Search..."
/>

// With Right Element
<Input
  type="password"
  leftIcon={<Lock className="w-4 h-4" />}
  rightElement={
    <button onClick={togglePassword}>
      <Eye className="w-4 h-4" />
    </button>
  }
  placeholder="Password"
/>

// Different Types
<Input type="email" placeholder="Email" />
<Input type="tel" placeholder="Phone" />
<Input type="number" placeholder="Number" />

// Disabled
<Input disabled placeholder="Disabled" />

API Reference

Props

variant-"default" | "filled" | "error" - Input style variant (default: "default")
inputSize-"sm" | "md" | "lg" - Input size (default: "md")
leftIcon-ReactNode - Icon to display at the start of the input
rightElement-ReactNode - Element to display at the end of the input
type-string - HTML input type (text, email, password, tel, number, etc.)
disabled-boolean - Disable the input
placeholder-string - Placeholder text
className-string - Additional CSS classes

Sizes

sm-h-9, px-3, py-2, text-sm, rounded-lg
md-h-11, px-4, py-2.5, text-sm, rounded-lg (default)
lg-h-14, px-4, py-3, text-base, rounded-xl

Features

  • Three variants: default (white), filled (light gray), and error
  • Three sizes: sm, md, lg
  • Left icon support
  • Right element support (icon, button, etc.)
  • Keyboard navigation and focus states
  • Disabled state with opacity
  • All standard HTML input types
  • WCAG compliant focus indicators