Form Layout Best Practices
Guide users with a clear visual path, not a maze. A single-column layout with consistent spacing creates a streamlined data entry experience. Use it for everything from contact forms to complex UIs.
Why it exists
Forms are where users do critical work, but poorly designed layouts create friction, increase cognitive load, and lead to errors. These patterns exist to create a consistent, predictable, and efficient path for users to enter data, making the experience faster and less error-prone.
The mental model
Think of a form as a guided conversation. A single-column layout creates a simple, linear dialogue. Each field is a question, and the user can move from one to the next without their eyes darting around the page. This creates a strong vertical rhythm, which is easy for users to scan and complete.
How it works
The core principle is creating a clear visual hierarchy using spacing and alignment. The default should always be a single-column layout. Group related fields into sections, separated by generous spacing (e.g., 32px). Separate individual fields within a section with slightly less space (e.g., 24px). For very closely related items like 'First Name' and 'Last Name', they can sit side-by-side in a 'field group' with even less space (e.g., 16px). On smaller viewports, these side-by-side groups must stack vertically to maintain the single-column flow.
When to use it
Apply these principles to any form, from a simple newsletter signup to a complex multi-step wizard for configuring cloud infrastructure. Consistency is the goal. Using a pre-built design system component is the ideal way to enforce these rules across an entire application, ensuring all forms feel familiar to the user.
When not to use it
While single-column is the strong default, multi-column layouts can be used sparingly for short, logically connected inputs that users perceive as a single chunk of information. Examples include credit card details (number, expiry, CVC) or a multi-line address. However, never exceed three columns, and do not mix different column counts (e.g., a two-column group and a three-column group) within the same form, as this breaks the visual rhythm.
One canonical example
A user settings page. A 'Profile' section might have fields for First Name and Last Name (in a two-column field group), followed by a single-column field for Email. A separate 'Password' section below it would have fields for Current Password, New Password, and Confirm New Password, all stacked vertically in a single column. The field widths should also hint at the expected content; the email field should be wider than the name fields.
Interview question
When is it appropriate to deviate from a single-column form layout?
- a.When the form contains more than ten input fields to save vertical space.
- b.When designing for very large displays to utilize the extra horizontal area.
- c.For short, logically grouped inputs that users perceive as one chunk of information.Correct
- d.To accommodate different field widths and visual styles within the same section.
Why? this is the answer
The card explicitly states that multi-column layouts can be used "sparingly for short, logically connected inputs that users perceive as a single chunk of information." Using multi-column for a large number of fields to save vertical space is generally discouraged as it can increase cognitive load.
Just read this? Test yourself on what you have been reading.
Read the original → helios.hashicorp.design
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on design systems — each one lists the topics its interview covers.
See open roles