Get startedFoundationsExamplesComponentsTokensGet supportSelect your development framework to see all code in your development language. Change framework and version at the top right of the screen.
Design at GoAAccessibilityBrand guidelinesColorIconographyPhotographyLogoTypographyLayoutCapitalizationDate formatError messagesHelper text
Content guidelinesError messagesError messages appear when the user's proposed action fails.
$

Anatomy

When a user inputs an unexpected value in the input field, an error message will appear below the field followed by a 16 pixels error icon. Both the icon and the error text are in red. The input field frame is displayed in red.Helper textWhen helper text and error message are both shown, the error message always appears above the helper text.
Do
Place error message above helper text.
Dont
Hide the helper text when there is an error.
Border
Do
Display input field border in red when there is an error.
Dont
Display the input field border in any other colour when there is an error.
Button/upload area
Do
Display an error message below the upload button.
Dont
Add a red border to the upload button.
Do
Display an error message below the upload area.
Dont
Add a red border to the upload area.

Language and tone

Be clear and conciseCommunicate errors with a brief, clear, positive and solution-oriented approach. Be direct and natural.Be specificBe specific about required information and what users should do to recover from the error.Provide a solutionAlways provide a solution to the user through clear instruction. When applicable, provide an example.Be empatheticSpeak in a humanized tone to be empathetic to the user. Let the user know that you understand their frustration.

Common error message templates

Follow the templates and examples below for common errors to create an error message that fits your context.

Input is empty

This error appears when user leaves a required field blank.
Enter a first name.
Do
Provide a clear solution for the user to correct the error.
First name is required.
Dont
Show an error without providing a clear solution with actionable language.
Enter an email address.
Do
Be specific, clear, and direct in communicating the required information to the user.
This field is required.
Dont
Show general errors to the user without including the context.

Incorrect information format

This error appears when the user fails to input valid/correct information such as entering an invalid postal code or phone number.To keep messages clear and concise, provide the solution to the user and include an example of a valid entry.
Enter a valid postal code,
such as T3Y 8Y2.
Do
Provide a clear positive solution with an example.
Postal code entered above is not correct.
Dont
Use a negative structure like “is not correct” or “incorrect”.
Enter a valid phone number,
such as 403-124-4567.
Do
Provide an example as to what the user should do and a hint to what the information should look like.
Your phone number is not valid.
Dont
Provide an error without a solution. Frame the error message with a solution, along with an example of a valid input.

Error with a date input

This error appears when the user fails to input a valid/correct date. Date range/duration information should be provided in the error message.View more information on date formatting.
The student must be 16 years old or older to be eligible for funding.
Do
Provide adequate information.
The student is younger than 16 years old on the session start date. They are not eligible for funding.
Dont
Provide inadequate information. This example is not telling the user what age is accepted for funding.
The study period must be between 3 and 52 weeks.
Do
Give the user a clear idea of the acceptable date range.
Study period must be longer than 3 and shorter than 52 weeks.
Dont
Be too wordy. Try to be less wordy, more direct and natural in your message.

Error within a value range

This error appears when user fails to input a valid/correct amount.
*Include amount if known
Books and Materials cost must be lower than $4,000.
Do
Provide a correct value if it is known.
You have exceeded the maximum amount.
Dont
Show an error without providing a solution.

Input outside accepted values

PID must be between 10 and 15 digits.
Do
Give a ranged value when possible.
PID must be at least 10 digits
Dont
Provide inadequate solution. This example gives an unclear solution. User only knows that the PID must be at least 10 digit.

Upload errors

When there is an error with the requested file, error message appears below the file upload button or area.View more information on file upload.File upload errors can appear when a user does any of the following:
  • Wrong file format uploaded.
  • File size exceeds the upload limit.
  • Upload fails.
  • Duplicate file is uploaded.
  • Required file is missing.

Wrong file type

The selected file must be a PDF, JPG, PNG, or TIFF.
Do
Provide user with the list of accepted formats.
Unsupported file format. Please try again with below mentioned formats. PDF, JPEG, PNG or TIFF file type(s).
Dont
Use wordy and negative structure.

File too large

The selected file must be less than 5MB.
Do
Provide user with the exact file size limit.
File size over limit. Please try again.
Dont
Give the user an error without unclear instruction on how to be successful.

File upload failed

We experienced an error while uploading your file. Please try again.
Do
Use humanized tone when stating the problem. In this example, the service accepts the responsibility for the failed upload and eases the frustration that user might feel.
File upload failed. Please try again.
Dont
Use blunt language. This example is not taking responsibility for the failed upload, and is passively blaming the user.

Duplicate file uploaded

This file is already uploaded. Please upload a different one.
Do
State the problem in a clear language and provide a solution as to what action should be taken.
Duplicate files are not accepted. Please try again.
Dont
State unclear problem. This example has a negative structure (“are not”) and does not guide the user to a solution.

No file selected

Upload a work permit.
Do
Provide a clear solution as to what user should do.
Document required
Dont
Provide an error without additional context as to what is required to be successful.

Invalid characters used

This error appears when user inputs invalid characters. To keep messages clear and concise, provide a guided solution.
You may only use Aa-Zz, 0-9, accents, a period, apostrophe, hyphen, and space.
Do
Display valid characters when possible. This example also conveys the accepted letters case to the users.
You may only use letters, numbers and the following special characters; accents, a period, apostrophe, hyphen or space.
Dont
State the guided solution in two parts.
When the accepted characters are known, include an example in the error message.
*Use “only” when relevant.
Alberta Bar ID must include numbers only, such as “12345.”
Do
Provide clear guided solution.
The Alberta Bar ID must consist of numerical digits only e.g. 12345
Dont
Use wordy and confusing language.

Incorrect number of characters

The Mobius reference number must be 10 digits.
Do
Provide a clear guided solution with context.
Ensure Mobius reference number is ten digits.
Dont
Display numbers in letters.
Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedFoundationsExamplesComponentsDesign tokensSubmit an issue#design-system-supportContribute to the design systemRoadmapRelease notes