Basic Form Elements
Whether it is a signup flow, a multi-view stepper, or a monotonous data entry interface, forms are one of the most important components of digital product design.
Below you will find common best practices of form design. Keep in mind there are exceptions to every rule. Feel free to download the UI kit and use in your next project.
1. Forms should be one column
Multiple columns disrupt a users vertical momentum.
2. Group labels with their inputs
Present the label and input close together, and make sure there is enough height between the fields so users don’t get confused.
3. Avoid all caps
All caps is more difficult to read and scan.
4. Show all selection options if under 6
Placing options in a selector drop-down requires two clicks, and hides the options. Use an input selector if there are over 5 options. Incorporate contextual search within the drop-down if there are over 25 options.
5. Resist using placeholder text as labels
It is tempting to optimize space by using placeholder text as labels, but it causes many usability issues.
6. Ditch the * and denote optional fields
Users don’t always know what is implied by the required field marker (*). Instead, it is better to denote optional fields.
7. Group related information
Users think in batches, and long forms can feel overwhelming. By creating logical groups, the user will make sense of the form much faster.
8. Differentiate primary from secondary actions
Provide visual prominence to the main action.
9. Make CTAs descriptive
A call to action should state the intent.