Helper text

Helper text is used with form elements to give the user context about their usage. Examples include indicating whether a field is optional or required.

Types

Types of helper text include block helper text, inline helper text, and placeholder text.

Block helper text

Use to explain why a piece of information is being requested, address security and privacy concerns, or to suggest ways of providing answers other than providing formatting examples. (For formatting examples, use placeholder text.) Appears with labels and label headings.

HTML code snippet

<label class="a-label a-label__heading">
    A label heading
    <small class="a-label_helper a-label_helper__block">Use block helper text for instructions</small>
</label>

<input class="a-text-input" type="text" id="helper-example">

Specs

Block helper text

  • Avenir Next Regular, 16 px, Gray (#5a5d61)
  • Margin top: 10 px
  • Margin bottom: 10 px

Inline helper text

Use to indicate whether a field is optional or required. Appears inline with label headings, and should be lowercase and placed in parenthesis after the label.

HTML code snippet

<label class="a-label a-label__heading">
    A label heading <small class="a-label_helper">(optional)</small>
</label>

<input class="a-text-input" type="text" id="helper-example">

Specs

Inline helper text

  • Avenir Next Regular, 16 px, Gray (#5a5d61)
  • Margin bottom: 10 px

Placeholder text

Use placeholder text for formatting examples only. Don’t use for instructions. Placeholder text disappears once a user begins typing in the field.





HTML code snippet

<label class="a-label a-label__heading" for="textinput-example-default">
    A label heading
</label>
<input class="a-text-input"
      type="text"
      id="textinput-example-default"
      placeholder="Enter text…"
      value="mm/dd/yyyy">
<br><br>
<input class="a-text-input"
      type="text"
      id="textinput-example-default"
      placeholder="Enter text…"
      value="email@example.com">
<br><br>
<input class="a-text-input"
      type="text"
      id="textinput-example-default"
      placeholder="Enter text…"
      value="placeholder text">

Specs

Placeholder text

Avenir Next Regular, 16 px, Gray (#5a5d61)

Content guidelines

Required vs. optional fields

Where possible, design your forms to only include required fields. If it’s not required, ask yourself if it’s really necessary to include at all. Add instructions at the top of the form to clearly indicate that all fields are required unless otherwise noted. If a field is optional, indicate it with inline helper text, as shown above. Don’t indicate which fields are required; that would only introduce redundant visual noise.

Try not to design forms consisting mainly of optional fields. If you must do so, mark required field labels only with inline helper text.

Accessibility

For screen reader accessibility, consider using the aria-describedby attribute for helper text, which gives screen readers users the information if they need while allowing more flexibility with placement.

Edit this page
Add new page