Input
Displays a form input field or a component that looks like an input field.
Usage
import { Input } from "@/components/ui/input"<Input placeholder="Email" type="email" />Examples
Default
<Input placeholder="Email" />With label
<div className="grid w-full max-w-sm gap-1.5">
<Label htmlFor="email">Email</Label>
<Input type="email" id="email" placeholder="name@example.com" />
</div>With placeholder
<Input placeholder="Search..." />Disabled
<Input placeholder="Disabled input" disabled />With button
<div className="flex w-full max-w-sm gap-2">
<Input placeholder="Search..." />
<Button type="submit">Search</Button>
</div>File
<div className="grid w-full max-w-sm gap-1.5">
<Label htmlFor="file">Upload file</Label>
<Input id="file" type="file" />
</div>Password
<Input type="password" placeholder="Password" />Last updated on