Error message
About this component
Error messages highlight form fields that a user has not completed correctly.
Error messages should:
- be consistent across different forms as much as possible
- only alert the user to an error when they try to move to the next page of a form or service
-
use a red border to highlight the message and the question it belongs to
-
if the error relates to specific text fields within the question, these should use a red border too
Do not use an error message to tell a user that they cannot complete a process. For example, telling the user that they cannot apply for a benefit. Follow our guidance for form submission result pages.
Why we use this component
An error message helps users to find and fix an error when filling in a form.
Website analytics
You can track the incidence of error messages through the original page path, the error text and a data attribute showing the type of error.
The Design System’s ‘tracking’ script adds this data attribute.
Accessibility
Error messages use some hidden text content to help users of assistive technology. They include the text 'Error:' before the error message. Users will hear something like this example: 'Error: the date your passport was issued must be in the past.'
Use aria-describedby
to link the input field with the error message. This will read the error message out to screen readers when the field is focussed.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback