Loading...
Loading...
The Input component is a versatile form control for text input with support for various input types, states, and validation. Perfect for forms, search bars, and user data entry.
This field has an error
Enter your full legal name
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
// Basic input
<Input type="text" placeholder="Enter text..." />
// With label
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="[email protected]" />
</div>
// Different types
<Input type="email" placeholder="Email" />
<Input type="password" placeholder="Password" />
<Input type="number" placeholder="Number" />
<Input type="date" />
<Input type="search" placeholder="Search..." />
// Disabled state
<Input disabled placeholder="Disabled" />
// With Field component
<Field>
<Label>Full Name</Label>
<Input placeholder="Enter name" />
<p className="text-sm text-muted-foreground">Helper text</p>
</Field>