Input Component

Basic Inputs

Name

Password

Input States

Error State

This field is required

Disabled State

Sizes

Small

Medium

Large

Usage Examples

Basic Input

import { Input } from "@/components/input";

<Input
  label="Name"
  placeholder="Enter your name"
  value={value}
  onChange={setValue}
/>

Input with Prefix/Suffix Icons

import { Mail, Lock } from "lucide-react";

<Input
  label="Email"
  type="email"
  placeholder="Enter your email"
  value={emailValue}
  onChange={setEmailValue}
  prefix={<Mail className="h-4 w-4" />}
/>

<Input
  label="Password"
  type="password"
  placeholder="Enter your password"
  value={passwordValue}
  onChange={setPasswordValue}
  suffix={<Lock className="h-4 w-4" />}
/>

Input with Error State

<Input
  label="Error State"
  placeholder="This input has an error"
  value={errorValue}
  onChange={setErrorValue}
  error="This field is required"
/>

Input with Different Sizes

<Input
  label="Small Input"
  placeholder="Small input"
  size="sm"
/>

<Input
  label="Medium Input"
  placeholder="Medium input"
  size="md"
/>

<Input
  label="Large Input"
  placeholder="Large input"
  size="lg"
/>