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 a multi-column form layouts
Use a single column form layouts
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