Input
Text input with focus ring and aria-invalid error styling from the token contract.
Preview
Installation
bash
npx shadcn@latest add @layout/inputUsage
tsx
import { Input } from "@/components/ui/input"Examples
Error state
Please enter a valid email address.
Disabled
Rotate your key in settings to change it.
Search input
Guidelines for AI agents
Pair with Label via htmlFor/id. Signal errors with aria-invalid plus a text-destructive helper line beneath.
Never
- Neveruse placeholder text as the only label
- Neverrestyle the focus ring per instance; it comes from --layout-ring
Tokens consumed
--layout-input--layout-ring--layout-danger--layout-muted-fg--layout-radius