components
Input
One height, one radius, one focus ring — everywhere. Error uses `aria-invalid` on the element itself; never hard-code a red border.
Read the full specDefault
A bare input. Placeholder text is a hint, not a label — always pair with a visible `<Label>` in production.
tsx
import { Input } from "@wolf/design-system";
<Input placeholder="you@wolf.co" />Types
Inherits every native type — `email`, `password`, `number`, `tel`, `url`, `date`, `file`.
tsx
<Input type="email" placeholder="you@wolf.co" />
<Input type="password" placeholder="••••••••" />
<Input type="number" placeholder="42" />
<Input type="file" />States
Default, focus, disabled, read-only, and error. Focus is keyboard-first — tab into the first field to see the ring.
tsx
<Input placeholder="Default" />
<Input placeholder="Disabled" disabled />
<Input defaultValue="Read-only value" readOnly />
<Input aria-invalid defaultValue="wrong@" />With leading adornment
No built-in adornment slot — compose with a wrapper and absolute-positioned icon to keep the focus ring on the input itself.
tsx
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" aria-hidden />
<Input className="pl-9" placeholder="Search reports…" />
</div>