Components menu
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.
About this component
Error messages highlight form fields that a user has not completed correctly.
Error messages should:
- 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 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
Why we use this component
An error message helps users to find and fix an error when filling in a form.
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.
Do not include personal or financial information, like your National Insurance number or credit card details.
HTML
<div class="question--error">
<label class="form-label" for="more-detail">Please provide more detail</label>
<p class="form-text" id="form-text-more-detail">Do not include personal or financial information, like your National Insurance number or credit card details.</p>
<p class="question--error-message" id="error-message-more-detail">This field is required</p>
<textarea rows="5" class="form-control form-input--error" id="more-detail" name="more-detail" aria-invalid="true" aria-required="true" aria-describedby="form-text-more-detail error-message-more-detail"></textarea>
</div>
CSS
/* Error message
------------------------------------ */
.question--error {
border-left: 4px solid var(--error-red);
padding-left: 20px;
}
.question--error-message {
color: var(--error-red);
font-weight: 700;
margin-bottom: 1rem;
}
.form-control.form-input--error {
border-color: var(--error-red);
border-width: 4px;
border-radius: 0;
display: block;
line-height: 2rem;
margin-bottom: 24px;
min-height: 48px;
padding: 4px;
width: 100%;
}
.form-control.is-invalid, .was-validated .form-control:invalid {
border-color: var(--error-red);
padding-right: calc(1.5em + .75rem);
background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e);
background-repeat: no-repeat;
background-position: right calc(.375em + .1875rem) center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}