BETA This is a new service — your feedback will help us to improve it.

Back to components

Error message

Highlight errors in forms

For each error:

  • write a message that helps the user to understand why the error occurred and what to do about it
  • put the message in the <label> or <legend> for the question, after the question text

Personal details

Personal details Error: Enter your full name
Error: Enter your email address

HTML Snippet for error message

<div class="error-summary" role="alert" aria-labelledby="error-summary-heading-example-1" tabindex="-1">
    <h2 class="heading-medium error-summary-heading" id="error-summary-heading-example-1">
        Message to alert the user to a problem goes here
    <p>Optional description of the errors and how to correct them </p>
    <ul class="error-summary-list">
        <li><a href="#full-name">Descriptive link to full name question with an error</a></li>
        <li><a href="#email-address">Descriptive link to email address question with an error</a></li>
<h1 class="heading-large">Personal details</h1>
    <div class="form-group form-group-error">
            <legend id="personal-details" class="sr-only">Personal details</legend>
                <label class="form-label" for="full-name">
                    Full name
                    <span class="form-hint">
                    As shown on your birth certificate or passport
                <span id="full-name-error" class="error-message"><span class="sr-only">Error: </span>Enter your full name</span>
                <input class="form-control form-control-error" id="full-name" type="text" name="full-name" aria-describedby="full-name-error">
            <div class="form-group form-group-error">
                <label class="form-label" for="email-address">
                    Email address
                <span id="email-address-error" class="error-message"><span class="sr-only">Error: </span>Enter your email address</span>
                <input class="form-control form-control-error" id="email-address" type="text" name="email-address" aria-describedby="email-address-error">
    <div class="form-group">
        <button class="btn btn-primary btn-arrow">Continue</button>
Back to top