Help Text

Help text, or instructional text, is used to provide more information to help someone know how to correctly answer a question. The text may provide format information (such as date, phone number or email) or a short definition of a term in the question.

Location

The text should appear between the field label and the field. This is to ensure the reading order is correct. An older pattern put the help text below the field, but this pattern is deprecated and should be updated.

Format

Text should be italicized paragraph text. Text should be kept short to a single sentence. If longer explanation is required, consider linking out to a new page, but note that linking out may interrupt user’s flow.

Examples

Help text is used to provide additional description for the question
Help text is used for formatting

Help text for Selections

Occasionally help text is required for individual selections (drop-down or checkboxes). In this instance, the help text will appear on the right-hand side of the question after the selection is made, and will change when the selection changes.

When possible, this pattern should be avoided as it hides information from the user until a selection is made. When used, additional text stating “Select an option below for description”.

Definition for a selected drop-down item on desktop

 

Definition for a selected drop-down item on mobile. The definition moves between the label and field on mobile

 

Definition for a selected radio button item on desktop

 

Definition for a selected radio button item on mobile. The definition moves below the field.

 

Related content