Form patterns

Section menu

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')

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. 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