Input Component

The Input component allows users to enter text information. It provides various variants and states for different use cases.

Basic Input

Code Example
// Basic input
<Input placeholder="Enter your name" />

// Controlled input
const [value, setValue] = useState('')
<Input 
  value={value} 
  onChange={(e) => setValue(e.target.value)} 
  placeholder="Controlled input" 
/>

Variants

Default

Secondary

Code Example
// Default variant
<Input variant="default" placeholder="Default variant" />

// Secondary variant
<Input variant="secondary" placeholder="Secondary variant" />

Sizes

Default size

Small size

Code Example
// Default size
<Input size="default" placeholder="Default size" />

// Small size
<Input size="small" placeholder="Small size" />

States

Disabled

Read-only

Code Example
// Disabled input
<Input disabled placeholder="Disabled input" />

// Read-only input
<Input readOnly value="Read-only value" />

Input Types

Email

Number

Password

Code Example
// Email input
<Input type="email" placeholder="Email address" />

// Number input
<Input type="number" placeholder="Enter a number" />

// Password input with toggle
const [showPassword, setShowPassword] = useState(false)

<div className="relative">
  <Input 
    type={showPassword ? "text" : "password"} 
    placeholder="Enter password" 
  />
  <button 
    type="button"
    onClick={() => setShowPassword(!showPassword)}
    className="absolute right-3 top-1/2 -translate-y-1/2"
  >
    {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
  </button>
</div>

Input with Icon

Search

Email

Code Example
// Search input with icon
<div className="relative">
  <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 h-4 w-4" />
  <Input className="pl-9" placeholder="Search..." />
</div>

// Email input with icon
<div className="relative">
  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 h-4 w-4" />
  <Input className="pl-9" placeholder="Email address" />
</div>

Usage Guidelines

Here are some best practices for using inputs:

  • Always provide clear, concise labels for inputs
  • Use placeholder text to provide additional guidance, not as a replacement for labels
  • Choose the appropriate input type for the data being collected
  • Provide helpful validation messages for incorrect input
  • Consider the mobile experience and ensure touch targets are large enough
  • Group related inputs together for better user experience