Errors
beta

Error states occur when the app fails to complete an expected action. This can happen due to system failure or user error. It's important to communicate error states to the user, especially on user error, so they can resolve the issue.

If the error affects the entire page on load, such as a server error, use the universal message paradigm at the top of the page, nearest to the content that is affected. Read more about Universal Messaging.

If an error affects the entire page, but doesn't cause the page to reload, use a toast. Read more about Toasts.

This is an error toast

Although the Design Language does not supply the JavaScript functionality, you will find the following guidelines demonstrated in the sample form below.

  • If there is an error in a specific form element, the error message should appear below the element in red. color: $negative;
  • An error should display if the user has entered text that is an error and then leaves the field. An empty required field should not display an error unless the submit button already has been clicked, allowing the user to tab through the fields, filling them out in any order, without encountering an error.
  • The error state should immediately correct once the error is fixed by the user.
  • Try to make the fields "friendly" for the user. For example, if the phone field must be in format XXX-XXX-XXXX, only allow numbers in the field and add the hyphen for the user at the appropriate place as they are typing. The same fool-proof auto-editing should apply to date–of–birth, Social Security Number, and any other fields with strict formatting where the user can easily be helped in avoiding errors.
  • If the form's submit button is clicked while there are errors, the form should display all errors and focus on the first one. The form is now in a state where a blank required field will display an error.

Try out various errors described above in the form below to better understand the requirements.
Read more about Form Elements.

Sample Form

lock

If an error only affects part of the page, such as a status message or user error, use an inline message style. We have two versions of this style, one with an icon and one without. The icon can appear next to the error text or to the part of the page that is affected.

warning current-utility-bill.png
current-utility-bill.png
current-utility-bill.png