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="textarea">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" data-form="error-more-detail">This field is required</p>
<textarea rows="5" class="ds_input ds_input--error" id="textarea" aria-invalid="true" aria-required="true" aria-describedby="hint-text-more-detail" data-form="textarea-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:
- as much as possible, be consistent across different forms
- 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.
Accessibility Features
To help screen reader users, the error message component includes a hidden ‘Error:’ before the error message. These users will hear, for example: “Error: the date your passport was issued must be in the past.”
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, for example data-form="error-postcode"
Feedback, help or support
If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot