Overview

When implementing a form that has required and optional fields, care should be taken to ensure a consistent and predictable experience.

Exceptions

In certain circumstances it’s ok to not mark required fields, these include:

• Sign in forms
• Single field forms (such as a confirmation checkbox in a notice)

Implementation

Required fields should be indicated using the following 3 methods:

1. At the top of the form ensure there is a message indicating there are required fields:

2. The label text must have the required indicator <abbr class="--required" title="required">*</abbr> at the end:

3. Each required field must have the required and aria-required="true" attributes:

Examples

References

• Clearly Identify Required Form Fields
• Indicating required form controls using label or legend
• Identifying a required field with the aria-required property