FormPage
One record being filled in: its name and the save at the top, anything that has to be read first under that, and the fields in folding groups underneath.
Master
Fill in the new account: the name is the only field that has to be filled in, and Create in the bar saves every group at once. Fold a group away, open one of the three that start closed, and scroll: the name and the notice stay at the top while the fields pass under them. Labels switches the whole form between a label column at the start of each field and a label over it. Columns lays the fields out in one, two or three; each column stops at 554px, so on a big screen the space past the last one stays empty, and the contacts table under the form keeps the full width. Three gives way to two when the page is too narrow for them. Stage 1920, 2560 and 3008 draws the frame at that screen's real width, scaled down to fit. Stage narrows the box the frame lives in, so watch the two columns become one on a phone.
Usage
Use FormPage to create or edit one record: a new account, a new invoice, a rate card. It is a blueprint: it composes kit pieces and keeps no state of its own, so the screen owns the values and what is folded away. Pass the kit PageHeader as header, with the trail, what is being made, and the actions: Cancel, then one strong brand Button that saves. children are one kit Form with an id and its groups of fields as sections, each collapsible. columns (1, 2 or 3, default 2) is set on the FormPage and the Form follows it unless it sets its own; each column stops at 554px (--layout-column-max) and the fields stay at the start, so on a wide screen the space past the last column stays empty instead of stretching the fields. Never more than 3 columns, even at 2560px and wider. On an edit page a related list can follow the Form as a kit Section holding a Table, one gutter below it; it keeps the full width. Pick where the labels go on the Form: labelPosition start for a column of labels beside the fields, top for a label over each one, and the whole page follows; give the header's save Button type submit and form set to that id, so one press saves the whole page and the form stays one form. notice writes what has to be read before filling anything in, as a kit Callout; it stays under the name while the fields scroll. Field problems belong on the fields; a save that failed goes on the Form's error. Do not put a second save at the foot of the page: the one in the header is always in reach. It goes in the AppShell page, which owns the page padding. See contracts/formpage.json for the full contract.
Do's
- Making a new record from a page of its own, not from a Modal.
- Editing a record's fields on a page, where the groups of fields are long enough to fold.
- The save has to be in reach while a long form is scrolled.
Don'ts
- Do not invent CreatePage, EditPage, NewRecordPage or FormLayout.
- Do not put a Form inside every Section yourself. One Form holds the groups as sections, so one press saves the page.
- Do not add a second save bar at the foot. The header keeps the save in reach.
- Do not put page padding on it. The AppShell page owns that; read contracts/layout.json.
- Do not use it for a short form. Two or three fields belong in a Modal or a Drawer.
- Do not keep the fold state or the values in the pattern. The screen owns them.
- Do not set a width on the Form or stretch its columns to fill a wide page. Pass columns to the FormPage; each column stops at 480px.
- Do not use more than 3 columns, even on a 2560px or wider screen.
<FormPage
columns={2}
/>