Overview
When implementing a form that has required and optional fields, care should be taken to ensure a consistent and predictable experience.
- Mark all required fields
- Ensure there is a description at the top of the form
- Place the required indicator at the end of the field label
- Use the correct ARIA attributes
- Mark optional fields
- Use the placeholder text to indicate a field is required
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:
<p class="ds-text --small">
Fields marked with an asterisk (<abbr class="--required" title="required">*</abbr>) are required.
</p>2. The label text must have the required indicator <abbr class="--required" title="required">*</abbr> at the end:
<label for="required-1" class="ds-text --label">
Label content <abbr class="--required" title="required">*</abbr>
</label>3. Each required field must have the required and aria-required="true" attributes:
<div class="ds-input">
<input id="required-1" type="text" required aria-required="true"/>
</div>Examples
<p class="ds-text --small">Fields marked with an asterisk (<abbr class="--required" title="required">*</abbr>) are required.</p>
<div class="ds-field">
<label for="required-1" class="ds-text --label">Label content <abbr class="--required" title="required">*</abbr></label>
<div class="ds-input">
<input id="required-1" type="text" required aria-required="true"/>
</div>
</div><p class="ds-text --small">Fields marked with an asterisk (<abbr class="--required" title="required">*</abbr>) are required.</p>
<label class="ds-field">
<p class="ds-text --label">Text content <abbr class="--required" title="required">*</abbr></p>
<div class="ds-input">
<input type="text" required aria-required="true"/>
</div>
</label>