Error Message

Show an error message when there is a validation error. In the error message explain what went wrong and how to fix it.

When to use this component

Show an error message next to the field and in the error summary when there is a validation error.

When not to use this component

Do not use error messages to tell a user that they are not eligible or do not have permission to do something. Or to tell them about a lack of capacity or other problem the user cannot fix - because the problem is with the service rather than with the information the user has provided.

Instead, take the user to a page that explains the problem (for example, telling them why they’re not eligible) and provides useful information about what to do next.

How it works

Run the validations for each page/question after the users distinctly indicate that their inputs are ready to be submitted, for example when clicking the “continue” button. This gives the user the opportunity to review their answer, or get out of the input’s focus and not get flooded with red error messages which can be overwhelming.

For each error:

• put the message in red after the question text and hint text
• use a red border to visually connect the message and the question it belongs to
• if the error relates to a specific field within the question, give it a red border and refer to that field in the error message - for example: “you must enter a year”

To help screen reader users, the error message component includes a hidden ‘Error:’ before the error message. These users will hear, for example, <span class="govcy-visually-hidden-error"> Error: </span> The date your passport was issued must be in the past.

Use aria-describedby="error_message_id" to help announce the error message on screen readers.

Summarize all errors at the top of the page the user is on using an error summary.

Examples