Layouts / Form layoutOpen in Figma
Form layout
ReadyFor creating or editing one record.
Regions
personSection
Hint text
Hint text
eventSection
Hintcalendar_month
Hintcalendar_month
| Region | Holds | Required | |
|---|---|---|---|
| 1 | Title bar | Close, form title | Yes |
| 2 | Sections | White section cards, each with an icon and heading, 16 apart | Yes |
| 3 | Action bar | One main action, 56 tall, pinned to the bottom | Yes |
Rules
- The action bar stays pinned to the bottom; the form scrolls under it.
- One form with switches inside it, never two forms for the same record.
- A switch never hides fields that are still needed.
- The main action stays disabled until required fields are filled.
- Leaving with unsaved changes asks first, using Confirm.