Components
Input
Input
Text input fields.
Default Input
<input class="flex h-10 w-full max-w-sm rounded-md border border-input bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" placeholder="Email" /><input className="flex h-10 w-full max-w-sm rounded-md border border-input bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" placeholder="Email" />Disabled Input
<input disabled class="flex h-10 w-full max-w-sm rounded-md border border-input bg-muted px-3 py-2 text-sm opacity-50 cursor-not-allowed" placeholder="Disabled" /><input disabled className="flex h-10 w-full max-w-sm rounded-md border border-input bg-muted px-3 py-2 text-sm opacity-50 cursor-not-allowed" placeholder="Disabled" />File Input
<input type="file" class="flex h-10 w-full max-w-sm rounded-md border border-input bg-transparent px-3 py-1.5 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium text-muted-foreground" /><input type="file" className="flex h-10 w-full max-w-sm rounded-md border border-input bg-transparent px-3 py-1.5 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium text-muted-foreground" />Input with Button
<div class="flex w-full max-w-sm items-center space-x-2"><input class="flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" placeholder="Email" /><button class="h-10 px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium">Subscribe</button></div><div className="flex w-full max-w-sm items-center space-x-2"><input className="flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" placeholder="Email" /><button className="h-10 px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium">Subscribe</button></div>Error Input
<input class="flex h-10 w-full max-w-sm rounded-md border border-red-500 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-red-500" placeholder="Error state" /><input className="flex h-10 w-full max-w-sm rounded-md border border-red-500 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-red-500" placeholder="Error state" />Success Input
<input class="flex h-10 w-full max-w-sm rounded-md border border-green-500 bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-500" value="valid@email.com" /><input className="flex h-10 w-full max-w-sm rounded-md border border-green-500 bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-500" value="valid@email.com" />Large Input
<input class="flex h-12 w-full max-w-sm rounded-md border border-input bg-transparent px-4 py-3 text-base placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring" placeholder="Large input" /><input className="flex h-12 w-full max-w-sm rounded-md border border-input bg-transparent px-4 py-3 text-base placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring" placeholder="Large input" />Small Input
<input class="flex h-8 w-full max-w-sm rounded-md border border-input bg-transparent px-2 py-1 text-xs placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring" placeholder="Small input" /><input className="flex h-8 w-full max-w-sm rounded-md border border-input bg-transparent px-2 py-1 text-xs placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring" placeholder="Small input" />Icon Left
<div class="relative w-full max-w-sm"><svg class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><input class="flex h-10 w-full rounded-md border border-input bg-transparent pl-9 pr-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring" placeholder="Search..." /></div><div className="relative w-full max-w-sm"><svg className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><input className="flex h-10 w-full rounded-md border border-input bg-transparent pl-9 pr-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring" placeholder="Search..." /></div>Icon Right
<div class="relative w-full max-w-sm"><input class="flex h-10 w-full rounded-md border border-input bg-transparent pl-3 pr-9 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring" placeholder="Password" /><svg class="absolute right-2.5 top-2.5 h-4 w-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg></div><div className="relative w-full max-w-sm"><input className="flex h-10 w-full rounded-md border border-input bg-transparent pl-3 pr-9 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring" placeholder="Password" /><svg className="absolute right-2.5 top-2.5 h-4 w-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg></div>