Components/Input

Input

A text input component with multiple design styles. Includes label, error state, and icon support.

Design 1: Simple Clean

Classic input with label on top. Works great for standard forms.

With Icon

With Error

Please enter a valid email

Design 2: Floating Label

Modern floating label that animates on focus. Popular in Material Design.

Full Name

Email Address

Design 3: Underline Style

Minimal underline-only design. Perfect for clean, modern interfaces.

Username

Password

Usage

import { Input } from "@/components/ui/input";
import { Mail } from "lucide-react";

export default function Example() {
  return (
    <form className="space-y-4">
      <Input label="Email" placeholder="you@example.com" />
      <Input label="With Icon" icon={<Mail className="h-4 w-4" />} />
      <Input label="With Error" error="This field is required" />
    </form>
  );
}