Skip to main content

Date input

Use date input to help users enter a memorable date, like their date of birth.

Code and design

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

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

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

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

When to use date input

The GOV.UK design system suggests using date input when you’re asking users for a date they already know.

When not to use date input

Do not use date input if users are unlikely to know the exact date you’re asking about.

Read more on the GOV.UK design system about how to ask users for dates.

How to use date input

Date input consists of 3 fields to let users enter a day, month and year.

Group the 3 date fields together in a <fieldset> with a <legend> that describes them. You can see an example at the top of this page. The legend is usually a question, like "What is your date of birth?".

If you are asking just 1 question per page as the GOV.UK design system recommends, you can set the contents of the <legend> as the page heading. This is good practice as it means that screen reader users will only hear the contents once.

Read more on the GOV.UK design system about why and how to set legends as headings.

Error messages

Style error messages like this:

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

    <span class="nhsuk-error-message" id="dob-errors-error">
      <span class="nhsuk-u-visually-hidden">Error:</span> Error message goes here
    </span>

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

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

{{ dateInput({
  "id": "dob-errors",
  "fieldset": {
    "legend": {
      "text": "What is your date of birth?"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "errorMessage": {
    "text": "Error message goes here"
  },
  "items": [
    {
      "name": "day",
      "classes": "nhsuk-input--width-2 nhsuk-input--error"
    },
    {
      "name": "month",
      "classes": "nhsuk-input--width-2 nhsuk-input--error"
    },
    {
      "name": "year",
      "classes": "nhsuk-input--width-4 nhsuk-input--error"
    }
  ]
}) }}

Follow the guidance on error messages and give specific error messages for specific error states.

Read more guidance on date input specific error messaging on the GOV.UK design system.

Research

We tested date input as part of a "Register for a GP" journey in 2 labs. All users understood what they needed to do and were able to successfully complete the set task.

If you’ve used this component, get in touch to share your user research findings.

Our date input is based on the one in the GOV.UK design system. GOV.UK say that they need to do more research to understand if users struggle to enter months as numbers and whether it's more helpful to let them enter months as text.

Discuss

Discuss date input on GitHub

Get in touch

If you have a question:

Updated: February 2019