Components
Components / templates
A page layout for filling in a form: one narrow column with the instructions first, the steps, the fields in sections and the buttons last.
Usage
Use it for applications, sign-ups and any task where people enter information step by step. The template keeps one column so the eye moves straight down, and puts the buttons in the same place on every step.
02 / examples
Variant 01
Dashed boxes are content that is filled in per form. Navigation, breadcrumb, progress and buttons use the system's own components.
View content
03 / contract
The form page template is a single, narrow column in the middle of the page, with the introduction first, then the progress, the form sections and the buttons last. One column keeps the eye moving straight down, and the buttons stay in the same place on every step.
The introduction says what is asked, how long it takes and that fields marked with an asterisk are required. The form column uses the form width, and the primary action sits on the right.
04 / accessibility
The page has one main heading, which is in the form introduction, and the form is a real form element with its sections grouped by headings or fieldsets. Progress is given in words as well as numbered steps.
Errors appear next to the field they belong to and also in a panel at the top, so people can find them quickly. See the notifications component for how errors and warnings are announced.