Skip to main content

Assistive Text

Provides users with extra context, guidance, or validation to ensure accurate input.

Overview

Assistive text helps users understand what kind of information they should enter, how to format it, or any specific requirements related to the input. It can provide examples, suggestions, error messages, validation rules, or any other relevant details that aid in accurate and meaningful input.

The purpose of assistive text is to enhance the user experience by reducing confusion, improving input accuracy, and ensuring users provide the expected information in the desired format.

Assistive text that is highlighting an error underneath a text input.

Dos and Don’ts

Do
  • Always use in combination with a form element to provide additional information or feedback.
Don't
  • If displaying success or error variants, don’t show until the user has finished entering information.

Anatomy

Anatomy of an assistive text.
  1. Icon: Visually supports the type of message. Only available for error and success validation.
  2. String: Provides informative information to the user.

Variations

Default

Shown when instructional information is required to help the user complete a form element.

Assistive text component in default state.

Error

Shown when an input fails validation, and feedback is required on an individual form.

Assistive text component in error state.

Success

Shown when an input passes validation, and feedback is required on an individual form.

Assistive text component in success state.

Content

All content should use sentence case.

Default

  • Should provide additional instructional information that helps the user fill out a form field, as clearly and succinctly as possible.
  • Use sentence case.

Error

  • Should describe the error and inform the user on how to fix it, as clearly and succinctly as possible.
  • Use sentence case.

Success

  • Should describe the success as clearly and succinctly as possible.
  • Use sentence case.

Overflow

Multiple words overflow

When a group of words extends beyond the available horizontal space, the text automatically wraps onto a new line, with no maximum height restriction.

Assistive text component with overflow displayed.
Assistive text component with overflow displayed.

Behaviours

If a validation variant of the assistive text is required for error or success, it appears once the field has been validated; and will replace the default assistive text if one was present.

Assistive text component showing its behaviours in various states.

Examples

LTR examples

Here are some examples of assistive text in left-to-right context:

Example of a left-to-right checkbox field with assistive text.
Example of a left-to-right input field with assistive text.

RTL examples

Here are some examples of assistive text in right-to-left context:

Example of a right-to-left checkbox field with assistive text.
Example of a right-to-left input field with assistive text.

Resources

Figma Component
 Stable
Figma Documentation
 Stable
Web Components
 Beta
Vue [Fozzie]
 N/A
React [Snacks]
 N/A
iOS JustUI [UI Kit]
 Pre-release
iOS PIE [SwiftUI]
 Pre-release
Android PIE [Compose & Views]
 Stable