Error message

Date adopted: 
August 30, 2018
Last update: 
March 21, 2025

Also called a validation message, an error message is related to a users input. They let the user know if the information they enter is incorrect or incomplete.

Why we have a design pattern for Error messages

We have a design pattern for Error messages so users understand and can see:

  • they need to take an action to proceed; and
  • what action they must take to resolve the error.

When to use Error messages

Use Error messages on all digital services and online forms where the user will input data. 

Only display an Error message when the user selects the "Continue to next step" button.

When not to use Error messages

Do not show Error messages in the following instances.

  • Before a person has inputted any data.
  • When a person selects or tabs to a new field.
  • Before a person is finished typing.
  • When a person moves away from a field.
  • To tell a person they are not eligible or do not have permission to do something. Instead, show a warning message to let them know:
    • why we cannot accept the entry or selection;
    • what to do next; and
    • includes a way for them to leave the transaction.

How Error messages work

If a person's input is incorrect, the system must let them know. We provide them with a visual cue and clear message to help them recover. 

Placement

Top of the page

Summarize all errors at the top of the screen the user is on.

Example of an Error message summary

A screen shot of an Error message summary that appears at the top of the page.

Field

Highlight the field where the error occurred. Describe the problem and how they can fix it.

Example of a form field with an error message

A screen shot to show what an error message looks like for a form field.

Language and style

The language you use should tell the user what went wrong and how they can fix it. These messages must be clear and written in plain language. 

Example: Replace default system messages like, "Field is blank" or "Entry not valid" with clear Error messages like, "Enter your postal code" or "Closing date must be after the starting date." These messages are easy to understand and point people to the solution.

Use standard messages for different form field types.

Example: A radio button field and a select field should use the same standard message.

Top of the page

The error summary should be styled as a Warning alert. Use these hex codes.

Background: #FED4BD
Icon: #943706
Text: #943706

Field

For each error use a red border to visually connect the Error message and the form field it belongs to. Use these hex codes.

Background: #FED4BD
Icon: #943706
Text: #943706

Example of an Error message

A screen shot of an Error message to show how the summary and form field messages work together.