Error messages Error messages appear when a user's action cannot be completed. They help users understand what went wrong and how to fix the problem. Error messages should be clear, concise, and actionable, guiding users toward a successful outcome.

Anatomy

When a user enters invalid or unexpected information, an error message appears below the input. Error states include:
  • An error message displayed below the input
  • An 18px "warning" icon
  • Red error text
  • A red border on the input
 These elements help users quickly identify and correct the issue.

Helper text

When helper text and an error message appear together, the error message should appear above the helper text.
Do
Place the error message above helper text.
Don't
Don't hide the helper text when an error occurs.

Input border

Do
Display the input border in red when there is an error.
Don't
Don't use any other border colour when the input is in an error state.

File uploader

Error messages should appear below the file uploader. Refer to the File uploader for implementation guidance.
Do
Display the error message below the file uploader.
Don't
Don't add a red border to the file uploader.

Language and tone

Be clear and concise

Use short, direct language that helps users quickly understand the problem.

Be specific

Explain what information is required and what the user needs to do.

Provide a solution

Always include clear instructions that help the user resolve the issue. When possible, include an example.

Be empathetic

Use a human tone that acknowledges the user's experience and avoids blaming language.

Common error message patterns

Use the patterns below when writing error messages for common situations.

Input is empty

This error appears when a required input is left blank.
[Action] + [Label] = Enter a first name
Enter a first name.
Do
Provide clear instructions.
Enter email address.
Do
Provide clear instructions.
First name is required.
Don't
Don't use vague or non-actionable messages.

Incorrect information format

This error appears when users enter information in an invalid format, such as a postal code or phone number. Include a clear solution and an example.
[Action] + a valid + [Label] + such as + [correct format] = Enter a valid postal code, such as T3R 8Y2
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.
Don't
Don't use negative language without a solution.

Error with a date entry

This error appears when a date does not meet the required criteria. Provide clear rules or acceptable ranges.
[Topic] + must be + [duration] = Start date must be within study period.
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.
Don't
Don't provide unclear explanations.

Error within a value range

This error appears when a value exceeds or falls below allowed limits.
[Label] + cost/amount/fee + must be + [qualifier] + [amount] = Tuition cost must be lower than $20,000
Books and materials cost must be lower than $4,000.
Do
Provide the correct value when known.
You have exceeded the maximum amount.
Don't
Don't show errors without explaining the acceptable value.

Input outside accepted values

This error appears when an input does not meet required constraints.
[Label] + must be between + [# number] and [# number] + digits. = PID must be between 10 and 15 digits.
PID must be between 10 and 15 digits.
Do
Provide a clear acceptable range.
PID must be at least 10 digits.
Don't
Don't provide an unclear solution.

Upload errors

Upload errors appear below the file uploader. These errors may occur when:
  • An unsupported file format is uploaded
  • The file size exceeds the limit
  • The upload fails
  • A duplicate file is uploaded
  • A required file is missing

Wrong file type

The selected file + must be + [List of accepted file formats] = The selected file must be PDF, JPEG, PNG, or TIFF
The selected file must be a PDF, JPG, PNG, or TIFF.
Do
Provide a list of accepted formats.
Unsupported file format. Please try again with below mentioned formats. PDF, JPEG, PNG or TIFF file type(s).
Don't
Don't use long or unclear wording.

File too large

The selected file + must be + [qualifier] + [size limit] = The selected file must be less than 5 MB
The selected file must be less than 5 MB.
Do
Provide the exact file size limit.
File size over limit. Please try again.
Don't
Don't provide vague instructions.

File upload failed

[Problem statement] + [guided solution] = We experienced an error while uploading your file. Please try again
File upload error. Please try again.
Do
Use empathetic language and take responsibility.
Your file upload failed.
Don't
Don't use blunt or accusing language.

Duplicate file uploaded

[Problem statement] + [guided solution] = This file is already uploaded. Please upload a different one.
This file has already been uploaded. Please upload a different file.
Do
Clearly explain the issue and next step.
Duplicate files are not accepted.
Don't
Don't use negative phrasing without guidance.

No file selected

[Action] + [label] = Upload a work permit
Upload a work permit.
Do
Provide clear instructions.
Document required.
Don't
Don't use vague messages.

Format errors

Invalid characters used

This error appears when unsupported characters are entered.
You may only use + [valid characters] = You may only use Aa-Zz, 0-9, hyphen, and space.
You may only use A-Z, a-z, 0-9, accents, periods, apostrophes, hyphens, and spaces.
Do
Provide the list of allowed characters.
You may only use letters, numbers and the following special characters; accents, a period, apostrophe, hyphen or space.
Don't
Don't state the guided solution in two parts.

Accepted characters are known

When the accepted characters are known, include an example in the error message.
[Label] + must include + [accepted characters] + (only)*, + such as + [example] = Alberta Bar ID must include numbers only, such as 123456
Alberta Bar ID must include numbers only, such as "12345."
Do
Provide a clear guided solution.
The Alberta Bar ID must consist of numerical digits only e.g. 12345.
Don't
Don't use unclear or wordy phrasing.

Incorrect number of characters

This error appears when the input length is incorrect.
[Label] + must be + [# number] digits = Mobius reference number must be 10 digits
The Mobius reference number must be 10 digits.
Do
Provide clear numeric requirements.
Ensure Mobius reference number is ten digits.
Don't
Don't display numbers in letters.
Join design system drop-in hours to:
  • Get feedback on your service
  • Propose new components or patterns
  • Suggest updates to existing resources
  • Ask questions
  • Share feedback
Drop-in sessions are available to Government of Alberta product teams. Book time in drop in hours