React Form Layout
The structure around your fields: FormSection (bordered region, uppercase header, one topic each), FormGrid (responsive 1–3 column field grid), FormActions (right-aligned bar with an optional sticky mode and a secondary slot), and ValidationSummary — the page-level error panel whose entries scroll to and focus the failing control. The demo composes Input, Select, UnitInput, Checkbox, and Switch into a working release form — submit it empty to see validation.
Installation
npx shadcn@latest add form-layout.json
Usage
Loading...
Props
| Component | Key props | Description |
|---|---|---|
| FormSection | title, description? | Bordered region with uppercase header |
| FormGrid | columns?: 1 \ | 2 \ |
| FormActions | sticky?, secondary? | Action bar; secondary renders left-aligned |
| ValidationSummary | errors: { field, message }[], title? | Error panel; entries focus the field by its id |