Input
A single line of text with a quiet fill, a clear focus ring, and an invalid state.
Profile
The name shown in your workspace.
Used for account notifications.
When to use it
Use Input for short answers: names, emails, URLs, and search terms. If people will write more than a sentence, use Textarea instead.
Always give it a visible label. A placeholder shows the expected format; it disappears as soon as people type, so it can’t be the label.
InputThis page
One line.
Profile
The name shown in your workspace.
Used for account notifications.
Names, emails, and other short answers.
How it behaves
Based on Base UI Input. Label each field and connect hints or errors using aria-describedby.
The default uses the page surface inside a settings row and a compact visible focus outline. Keep labels and hints visible beside controls on wide layouts and above them on narrow screens.
Set aria-invalid for invalid values. Native input props and onValueChange are forwarded; validation belongs to your form.
Build it
Add it with the shadcn CLI:
1pnpm dlx shadcn@latest add https://jzbui.com/r/input.jsonA complete example. Change the values to fit your product:
123456789import { Input } from "@/components/ui/input"
<div className="grid gap-3 border-b border-border py-4 sm:grid-cols-[minmax(0,1fr)_180px] sm:items-center"> <div> <label htmlFor="email" className="label-md">Email address</label> <p id="email-hint" className="caption text-muted-foreground">Used for account notifications.</p> </div> <Input id="email" type="email" placeholder="you@example.com" aria-describedby="email-hint" /></div>The full source is yours to edit once installed: