Form layout

Pattern in development

We are refreshing this pattern to include new guidance and code.

Basic form

This form layout involves displaying multiple form fields on one page.

Try to limit the number of fields on a page to about five or six.

Always keep the layout of the form simple by preferring a single column of fields.

Form fields should match the size of the answer you expect to each question – such as a short, single-line text field for a first name, or a long, multi-line text field for a paragraph.

A good example of a form with fields that match the size of the expected input and are displayed in a single column.

Use fields that reflect the size of the expected input to make it easier to understand what each question is asking for. The whole width of the page does not need to be filled.

A bad example of a form with fields that take up the whole width of the screen instead of matching the size of the expected input. The form fields are also displayed in multiple columns.

Don't use multiple columns as this can affect readability and make it more likely that users will miss something.

Align form fields to the left for a clean and consistent layout for your application.

A bad example of a form that is centre-aligned, with a left-aligned page header.

Don't align your form to the centre of the page.

Multi-page form

Use a stepper (which is built into the page header component) to separate a long form out into multiple pages.

Use multiple pages if your form is much longer than about five or six fields.

A form, with four fields, and a stepper indicating the current step.

A stepper can split up complex forms to let you add inline guidance and design simpler layouts.

A form, with two fields, and a stepper indicating the current, completed, and invalid steps.

A stepper can help you manage complex validation and intermediate (as-you-go) saving of forms.

Last reviewed 15 November 2022 .