Error message

Use an error message when there is a validation error. Explain what went wrong and how to fix it.

Code and design

Error message

Open in new window
Copy
<span class="nhsuk-error-message">
  <span class="nhsuk-u-visually-hidden">Error:</span> Date of birth must be in the past
</span>
Copy
{% from 'error-message/macro.njk' import errorMessage %}

{{ errorMessage({
  "text": "Date of birth must be in the past"
}) }}

Error message in context

Open in new window
Copy
<div class="nhsuk-form-group nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" aria-describedby="dob-day-error-hint dob-day-error-error" role="group">
    <legend class="nhsuk-fieldset__legend">
      What is your date of birth?
    </legend>
    <span class="nhsuk-hint" id="dob-day-error-hint">
      For example, 31 3 1980
    </span>

    <span class="nhsuk-error-message" id="dob-day-error-error">
      <span class="nhsuk-u-visually-hidden">Error:</span> Date of birth must be in the past
    </span>

    <div class="nhsuk-date-input" id="dob-day-error">
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="dob-day-error-day">
            Day
          </label>
          <input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2 nhsuk-input--error" id="dob-day-error-day" name="dob-day-error-day" type="number" pattern="[0-9]*">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="dob-day-error-month">
            Month
          </label>
          <input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2" id="dob-day-error-month" name="dob-day-error-month" type="number" pattern="[0-9]*">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="dob-day-error-year">
            Year
          </label>
          <input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-4" id="dob-day-error-year" name="dob-day-error-year" type="number" pattern="[0-9]*">
        </div>
      </div>
    </div>
  </fieldset>

</div>
Copy
{% from 'error-message/macro.njk' import errorMessage %}
{% from 'date-input/macro.njk' import dateInput %}

{{ dateInput({
      "id": "dob-day-error",
      "namePrefix": "dob-day-error",
      "fieldset": {
          "legend": {
          "text": "What is your date of birth?"
          }
      },
      "hint": {
          "text": "For example, 31 3 1980"
      },
      "errorMessage": {
          "text": "Date of birth must be in the past"
      },
      "items": [
          {
          "name": "day",
          "classes": "nhsuk-input--width-2 nhsuk-input--error"
          },
          {
          "name": "month",
          "classes": "nhsuk-input--width-2"
          },
          {
          "name": "year",
          "classes": "nhsuk-input--width-4"
          }
      ]
      }) }}

When to use error messages

Show an error message next to the field - as well as in the error summary - when there is a validation error.

Use standard messages for different components. GOV.UK have some good examples.

Follow GOV.UK's advice on structuring forms and design your service to be easy to use and understand so someone never sees an error message.

When not to use error messages

As the GOV.UK design system says, only display an error when someone tries to move to the next part of the service. Do not show error messages:

  • when users select or tab to a field
  • as they are typing
  • when they move away from a field

Do not use error messages to tell users that they are not eligible or do not have permission to do something. Instead, take them to a screen that:

  • explains why you cannot accept the entry or selection
  • tells them what to do next
  • includes a way to leave the transaction

How to use error messages

Read more about how error messages work and on how to use them effectively on the GOV.UK design system.

Research

GOV.UK research on error messages showed users:

  • understood what went wrong
  • knew how to fix the problem
  • were able to recover from the error

Get in touch to share your research findings if you've used error messages.

Discuss

Discuss error messages on GitHub

Get in touch

If you have a question:

Updated: February 2019