Field
Form field wiring for label, description, error, and validation state.
We never share it.
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/field.jsonUsage
Field connects everything inside it: the label gets for, the control gets
aria-describedby for descriptions and errors, and validation state flows to
every part. All Plinth form controls are Field-aware.
import { Field, FieldLabel, FieldDescription, FieldError } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
<Field>
<FieldLabel>Email</FieldLabel>
<Input type="email" required />
<FieldDescription>Work email preferred.</FieldDescription>
<FieldError /> {/* shows native validation messages automatically */}
</Field>Error state
Pass invalid to force the state, or let native validation drive it.
Only letters and numbers allowed.
Disabled
disabled on the Field disables and dims the whole unit.
Parts
| Part | Purpose |
|---|---|
Field | Wrapper; accepts invalid, disabled, name |
FieldLabel | Auto-wired label |
FieldDescription | Helper text, announced with the control |
FieldError | Error message; match controls when it shows |
FieldControl | Renders custom elements as the field's control |
Accessibility
- Built on Base UI Field:
for/idpairing,aria-describedby, andaria-invalidare handled for you and stay correct as parts mount and unmount. - Errors are associated with the control, so screen readers announce them on focus, not just visually.