Components · Forms
Field
shadcn's Field, wired: the label, description, error and success messages connect to the control on their own, and invalid, disabled and required reach it from the Field.
Letters, numbers and dashes. You can change it later.
That username is taken
Installation
npx shadcn@latest add https://www.syntaqx.com/r/field.jsonChanges from shadcn
It installs over shadcn's Field and keeps its API, variants and data-slots, so code written for it keeps working. On top of that:
- A Field wires its control: the label points at it, and it's described by whichever description, error or success message is actually rendered.
invalid,disabledandrequiredon the Field reach the control;requiredadds a marker to the label.- FieldError carries an icon and renders nothing when empty, so it never leaves a gap; FieldValid is new.
- FieldDescription is a div, so it can hold a list.
Examples
Success
20% off your first year
Reward early, punish late
Show success as soon as a value is valid, but wait for the reader to leave the field before showing an error. Once a field is in error, re-check on every keystroke so the error clears the instant it's fixed. Type an address slowly into each to feel the difference.
Inspired by Mihael Konjević