Mandatory Fields
Last updated: September 14, 2015 at 20:10 pm

Visual styling and positioning of mandatory field indicators.

Visual example of the element:

What problem does this element or pattern solve?
Many UX professionals believe that if a form field isn’t mandatory, there’s no need to ask the user for that information. But there are just as many marketing professionals who feel differently – they want to collect as much information as the user is willing to provide. When defining this pattern, you must balance those two positions.
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

  • First, you must determine if all the fields presented on your forms are mandatory. If so, then a mandatory field designator will not be necessary. However, you may want to add a small text block that states “all fields” are mandatory.
  • If certain fields are mandatory while others are optional, you should alert users to that fact. What is the visual styling for the mandatory designator? Is it text or an icon? Where is it positioned? What colors are used?
  • Like text fields, when are mandatory fields validated?
  • As mentioned earlier, be sure to carefully cross-reference related form standards and provide examples of working forms to help your designers and developers maintain consistency.

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:
required fields, optional input, required markings, required info
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