Components
Field
Label, hint and error in one wrapper, so no input is left unlabelled.
Shown to everyone on the team.
That domain is already claimed.
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/field.jsonField owns the plumbing
Field generates the id, wires htmlFor, and links hint and error text through
aria-describedby. The input inside it stays a plain input.
An error replaces the hint rather than stacking under it — two lines of
guidance under one field is one line too many, and the error is the one that
matters.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Rendered as a real <label>. |
| hint | string | — | Guidance shown when there is no error. |
| error | string | — | Replaces the hint and puts the control in its error state. |
| required | boolean | false | Marks the label, and sets aria-required. |
Select has no size prop
Select deliberately omits the native size attribute. On a native <select>
that is a row count, and it collided with this system's sm | md sizing —
passing size="sm" would have silently turned the control into a list box.