Components / Forms
Forms
All form controls share the same warm border system (--border)
and focus ring. Error states use --destructive.
Labels always use Instrument Sans, never Oswald — form labels are informative, not directive.
Form Elements
Inputs
Controls
Validation States
No validation applied
Please enter a valid email address
✓ Valid email address
This field cannot be edited
Reference value, not editable
Usage Guidelines
✓ Labels always visible
Every form field has a visible label. Placeholder text alone is never sufficient — it disappears on focus.
✓ Error messages below the field
Validation messages appear below the field, in destructive color, as a text element — not a toast.
✗ Placeholder as label
Placeholders vanish on input. Always provide a visible <label> element paired with htmlFor.
✗ Custom styled checkboxes with div
Always use the Checkbox component from shadcn/ui. Never style div elements to look like checkboxes.