Input
A single-line text field.
Installation
npx shadcn@latest add @blank/inputUsage
import { Input } from "@/components/ui/input"<Input type="email" placeholder="you@example.com" />Examples
Sizes
32, 36 and 40 px, the scale every control shares with Button, so a field and a button in one row line up.
With a label
Input stays a bare field. Labels, descriptions and errors come from Field, which does the same job for every control in the system — checkbox, select, textarea — so there is one place to learn and one place to fix.
We only use it for receipts.
Invalid
Set aria-invalid on the input. The error styling follows from the attribute, so assistive technology and the visual state can never disagree.
That handle is already in use.
With an addon
Icons, buttons and prefixes attach through InputGroup rather than through props on the input.
Disabled
API Reference
Input
Every input prop except the native size, plus:
| Prop | Type | Default |
|---|---|---|
size | "sm" | "default" | "lg" | "default" |
inputVariants
The cva function behind Input, for styling another element as a field.