Agriculture Design System
Design System for the Export Service

Multi-page form

Use this template to break up large forms into multiple smaller steps to decrease cognitive load.

View template preview
View in FigmaView in StorybookView in Github

Usage guidelines

  • Try to limit forms to a single question per page (a question could include multiple related fields).
  • Place the Progress indicator component in left column.
  • The mobile version of the Progress indicator compresses into accordion to ensure it’s not in the way of filling out the form.
  • Avoid using disabled buttons in the Progress indicator.
  • Avoid adding or removing dynamic list items in Progress indicator.
  • Include a sub heading above the H1 to tie form steps together.
  • Include a Button group at the bottom.
  • Ensure primary button text is contextual, and consistent with the page heading - e.g. ‘Register establishment’. Avoid vague labels such as ‘Submit’.
  • Hide Breadcrumbs and Side nav to create focus on the form and reduce distractions.
  • Include a ‘back’ link at the top.
  • It’s a familiar position for the back button on mobile and web browsers.
  • It’s a conventional position for secondary navigation - breadcrumbs and back button.
  • People can quickly go back to check the previous form.
  • There’s less chance of people going back and losing a filled form by mistake.
  • It minimises the time for a user to proceed by reducing options near primary actions.
  • It maintains accurate visual hierarchy making the back action less prominent than the primary action ‘Continue’.