Required Usage

All required fields should be marked with a red asterisk

The "All fields marked with * are required" statement (see example in demo) should be displayed at the top of every form with required field asterisks. The statement only needs to be displayed once at the "top" of the screen (e.g., if there are multiple cards with form fields, put the statement on the first/top-most card with fields).

Use an asterisk (*) with the form field label:

• <span class="text-danger required-asterisk">*</span>

Add text for a screen reader that a field is required:

• <span class="sr-only">required</span>

Provide HTML and ARIA required attributes.

• HTML5: <input type="text" id="first-name1" name="first-name" required>
• ARIA: <input type="text" id="first-name2" name="first-name" aria-required="true">

Optional Usage

For optional fields, "(optional)" can be displayed if it makes sense for the specific form/screen (e.g., on the ecommerce redesigns, with the Phone Extension field). If using Optional display instead of Required, include the statement "All fields are required unless marked as Optional" at the top of the form.

When marking an optional field, use <span class="optionalText">(optional)</span>

Circumstances that you can utilize Optional form fields:

• When asking for an address from a user, additional address fields beyond the first can be marked as optional.
• When asking for a user's name and the middle name or initial is optional.

Ideally, a combination of the above methods to mark that fields are required and optional within forms to make it clearest to all users. This will reduce the number of errors when filling out forms and allow a smoother user experience for users.

All fields marked with * are required