Input
Text input with three sizes and invalid state, Field-aware.
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/input.jsonUsage
import { Input } from "@/components/ui/input";
<Input type="email" placeholder="you@company.com" />Pair with Field for label, description, and error wiring.
Sizes
States
Props
| Prop | Type | Default |
|---|---|---|
size | sm · md · lg | md |
Accepts all native input props (type, placeholder, disabled, ...).
Accessibility
- Inside a Field, labels and messages wire automatically; standalone, pair it
with a Label via
htmlFor/id. aria-invalid(or Field's invalid state) turns the border to the destructive token in both themes.