Pattern Library

Forms

Top Aligned Forms

Email Password State MA TX UT Sign in

Right Aligned Forms

Username

Password

Email Address

I've read the terms and conditions Submit

Grouped Forms

Sign in

Form Guidelines

No one likes filling out forms. Therefore we need to minimize the pain. Key design principles for forms are:

• Only request the minimum amount of information
• Provide consistent forms
• Use top aligned labels when data being collected is familiar (fastest completion times)
• Use right aligned labels when the forms are for unfamiliar or data entry is advanced
• Avoid optional fields wherever possible. Make it clear when a field is optional.
• Use consistent field lengths except for smaller fields where fields length shows amount of required data
• Use relevant content groupings to organize forms
• Use minimum amount of visual elements
• Emphasize primary actions, minimize secondary actions
• Provide help when needed, but keep it minimal. Too much will overwhelm the user.