Skip to main content

Form elements - Error message

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

Open this error message in context example in new window
<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 nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        What is your date of birth?
    <span class="nhsuk-hint" id="dob-day-error-hint">
      For example, 31 3 1980

    <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

    <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">
          <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" value="15" pattern="[0-9]*">
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="dob-day-error-month">
          <input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2 nhsuk-input--error" id="dob-day-error-month" name="dob-day-error-month" type="number" value="3" pattern="[0-9]*">
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="dob-day-error-year">
          <input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-4 nhsuk-input--error" id="dob-day-error-year" name="dob-day-error-year" type="number" value="2084" pattern="[0-9]*">

{% 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?",
          "classes": "nhsuk-fieldset__legend--l",
          "isPageHeading": true
      "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",
          value: 15
          "name": "month",
          "classes": "nhsuk-input--width-2 nhsuk-input--error",
          value: 3
          "name": "year",
          "classes": "nhsuk-input--width-4 nhsuk-input--error",
          value: 2084
      }) }}

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.

Follow our guidance on how to write good questions for forms and make them easy to use so that users never see an error message. If you're still getting errors, consider instead whether you need to change your back-end processes.

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

Focus on telling users how to fix the problem rather than describing what's gone wrong. You may need to write more than 1 error message for each field. Read more about writing good error messages on GOV.UK.

Use standard messages for different components. The GOV.UK Design System has some good error message templates for common errors.

The GOV.UK Design System also has more information about how error messages work.


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.

Help improve this page

The manual is a community effort. Anyone can help improve and grow it.

To help make sure the Error message guidance is useful, relevant and up to date, you can:

Need help?

If you’ve got a question about the NHS digital service manual or want to feedback, you can contact the team:

Help improve the service manual

We’d welcome your feedback. Can you answer some questions about your visit today?

Updated: February 2020