Skip to main content

Use consistent patterns

There are 2 form patterns in the Design System. On desktop all forms span 8 columns, with 4 columns for page navigation or static content if required.  

Choose your pattern based on the number of steps a user must take to complete the form.

Single page form

Use the single page form layout for simple forms on one page. These follow a single column structure. The buttons follow the pattern:

  1. primary action (submit button with meaningful label)
  2. secondary action (such as 'Save as draft')
  3. tertiary action (usually 'Close without saving')
A simple greyscale representation of a single page form.

Multi-step form

When creating a form with more than one page use the multi-step form template. As with all Turas forms this follows a single column layout. This form pattern also includes:

    1. page navigation
    2. status label
    3. primary action ('Continue' until the last page then a submit button with meaningful and descriptive label)
    4. secondary action (such as 'Save as draft')
    5. tertiary action (usually 'Close without saving')
    6. back to previous section navigation
A simple greyscale image representing a multi step form page layout

Was this page helpful?