Skip to main content

Form structure

Single column layouts

All Design System forms are based on a one column structure. Forms that are presented in a single column are often considered more usable and accessible than multiple column forms because they:

  • take less effort to scan and complete because the user can move down the page in a linear and logical fashion, without having to move their eyes or scroll horizontally
  • make it easier to navigate for users who rely on keyboard navigation or screen readers
  • are more flexible and can adapt to different screen sizes and resolutions, helping to make the form more accessible to all users, regardless of their device
  • are better for mobile devices because they are more suitable for smaller screens as users don't have to zoom in or scroll horizontally to complete the form
  • create a consistent layout for all forms on an application or platform, reducing confusion and making it easier complete different forms
  • decrease the cognitive load on users because they don't need to process and remember information from multiple columns simultaneously, which can be overwhelming, especially for longer or complex forms

Avoid multi-column form layouts

A simple page layout demonstrating the difficult reading patterns of a multi-column form

Use a single column form layout

A simple graphic showing an easy reading pattern on a single column form

Exceptions

There are a few exceptions to this guidance:

  • when using form fields for filters and search
  • when fields can be placed in the same row without confusing users
  • when a multi-column layout is a familiar or expected pattern for those fields

Was this page helpful?