Error message

<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" id="error-message-more-detail">This field is required</p>
    <textarea rows="5" class="ds_input  ds_input--error" id="more-detail" name="more-detail" aria-invalid="true" aria-required="true" aria-describedby="hint-text-more-detail error-message-more-detail"></textarea>
</div>

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.