Error message
Error messages tell a user that there's been a problem with the answer they've given on a form or a webpage, and how to fix it.
Sample HTML
<div class="ds_question ds_question--error" id="error-id-three">
<label class="ds_label" for="more-detail">Please provide more detail</label>
<p class="ds_hint-text" id="hint-text-more-detail">Do not include personal or financial information, like your National Insurance number or credit card details.</p>
<p class="ds_question__error-message">This field is required</p>
<textarea rows="5" class="ds_input ds_input--error" id="more-detail" aria-invalid="true" aria-required="true" aria-describedby="hint-text-more-detail"></textarea>
</div>
About this component
Error messages are shown next to the field where there’s been a problem, and also in the error summary at the top of the page.
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 visually connect the message and the question it belongs to - if the error relates to specific text fields within the question, these should be given a red border too
They should not be used to tell users that they cannot apply for something, such as a benefit, or that they’re not allowed carry on.
Why we use this component
Helps users to easily and quickly correct an error when filling in an online form.
Website analytics
To understand the incidence of validation error messages, they can be tracked through the original page path, the error text, and a data attribute showing the type of error.
The data attribute is added automatically by the Design System’s ‘tracking’ script.
Accessibility
To help screen reader users, the error message component includes the hidden ‘Error:’ before the error message. These users will hear, for example: “Error: the date your passport was issued must be in the past.”
Feedback, help or support
If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot