Helper text

Helper text is used with form elements to give the user context about their usage.

Types

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

Block helper text

Block helper text appears directly beneath a form label. Use it 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.

HTML code snippet

<label class="a-label a-label__heading" for="helper-block-example">
Label
    <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-block-example">

Specs

Color variables for helper text

Block helper text

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

Inline helper text

Inline helper text appears directly after a form label. Use it to indicate whether a field is optional. See the behavior section for more information.

HTML code snippet

<label class="a-label a-label__heading" for="helper-inline-example">
 Label <small class="a-label_helper">(optional)</small>
</label>

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

Specs

Inline helper text

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

Appears inline with label headings, and should be lowercase and placed in parenthesis after the label.

Placeholder text

Placeholder text appears within a text input field, and disappears once a user begins typing in that field. Use it for formatting examples only.



HTML code snippet

<label class="a-label a-label__heading" for="textinput-example-birthdate-default">
    Birth date
</label>
<input class="a-text-input"
      type="text"
      id="textinput-example-birthdate-default"
      placeholder="mm/dd/yyyy">
<br><br>
<label class="a-label a-label__heading" for="textinput-example-email-default">
    Email address
</label>
<input class="a-text-input"
      type="text"
      id="textinput-example-email-default"
      placeholder="email@example.com">

Specs

Placeholder text

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