Input

<Input placeholder="Default input" />
<Input placeholder="Email input" type="email" />
<Input placeholder="Password input" type="password" />
<Input placeholder="Search input" type="search" />

<Input placeholder="Small input" size="sm" />
<Input placeholder="Medium input" size="md" />
<Input placeholder="Large input" size="lg" />

<Input placeholder="Normal state" />
<Input placeholder="Disabled state" disabled />
<Input placeholder="Required field" required />
<Input placeholder="Read only" readOnly value="Read only value" />

// With left icon
<div className="relative">
  <Input placeholder="Search..." className="pl-10" />
  <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
</div>

// With right icon
<div className="relative">
  <Input placeholder="Enter email" type="email" className="pr-10" />
  <EmailIcon className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
</div>

const [value, setValue] = useState('')
const [error, setError] = useState('')

const handleChange = (e) => {
  setValue(e.target.value)
  if (!e.target.value) {
    setError('This field is required')
  } else {
    setError('')
  }
}

return (
  <div>
    <Input 
      value={value}
      onChange={handleChange}
      className={error ? 'border-red-500 focus:border-red-500' : ''}
    />
    {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
  </div>
)

<form className="space-y-4">
  <div>
    <label className="block text-sm font-medium mb-2">Full Name</label>
    <Input placeholder="Enter your full name" required />
  </div>
  <div>
    <label className="block text-sm font-medium mb-2">Email</label>
    <Input type="email" placeholder="Enter your email" required />
  </div>
  <div>
    <label className="block text-sm font-medium mb-2">Password</label>
    <Input type="password" placeholder="Enter your password" required />
  </div>
  <Button type="submit">Submit</Button>
</form>