Required legend

The required legend indicates which fields are required within the form. It’s located above the form and under its corresponding heading and has descriptive screen reader text regarding the required dot’s meaning throughout the form.

Usage guidelines

The required legend appears at the top of any inline form when there is a combination of required and optional fields within the form.

A required dot is placed within the label of each required input field with equivalent screen reader text indicating that the field is required. Labels for input groups will also have a required dot indicating that the entire input group must have a value to submit the form.

Exceptions

On a page that only contains one form, and no other content, and when all the fields are required, instead of using the required legend, place a sentence of text at the top of the form below it’s heading that says “All fields are required.” You do not have to mark the form inputs with required dots when this scenario applies.

The aa.com home page does not contain any required legend or required field text. It is the only page where the required legend does not appear in any form.

<p style="margin-bottom:20px">( <span class="icon-required" aria-hidden="true"></span> Required<span class="show-for-sr">dot indicates required</span>)</p>
  • Handle: @required-legend
  • Preview:
  • Filesystem Path: components/web/formfield/required-legend/required-legend.hbs
  • Referenced by (1): @usage