Form Field Labels
Last updated: September 14, 2015 at 14:07 pm

Visual styling and positioning of your form labels.

Visual example of the element:

What problem does this element or pattern solve?
Those who have been caught in debates over the positioning and content of form labels can attest that very few topics can create as much churn. Ironically, tests show that users don’t have any real preferences when it comes to label formatting so long as the labels are clear and it is obvious which field is being referenced. What is important, however, is consistency and behavior across pages and devices.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • Consider the typography for form field labels. Is it consistent or different from other copy on the site? If different, is it clearly defined on the typography scaffolding page?
  • Finalize the alignment and positioning of labels in relation to their corresponding fields. Recommended positioning may be closely tied to your maximum label length.
  • Will your company place labels outside the form fields or within them (Ghost Text)? This discussion may be more contentious than many heated political debates.
  • Be sure to specify any label positioning shifts when switching between devices.
  • If additional information or hints are required (for example, “passwords must be at least 6 characters”), where will those be positioned in relation to the field or label? How will they be formatted? Will they be placed inside tool tips?
  • Cross-reference the page which contains information on form field errors, mandatory field designation, and validation.

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
form field labels, form questions
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)

Owners and governance
UX or design 0wner
John Designowner
Business or marketing owner
Mary Businessowner
Development owner
Mike Devowner

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions

Leave a Reply