Soracom

Design System
  1. Home
  2. Design system
  3. Ux patterns
  4. Required fields

Required fields

Marking required fields in forms

Overview

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

Always
  1. Mark all required fields
  2. Ensure there is a description at the top of the form
  3. Place the required indicator at the end of the field label
  4. Use the correct ARIA attributes
Never
  1. Mark optional fields
  2. 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:

html
Copy 
<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:

html
Copy 
<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:

html
Copy 
<div class="ds-input">
  <input id="required-1" type="text" required aria-required="true" />
</div>

Examples

Example using div container

html
Copy 
<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>

Example using label container

html
Copy 
<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>

References