Date input

When to use this component

Use the date input component when users need to input a memorable or easily retrievable date.

When not to use this component

Avoid using the date input component if users are unlikely to know the precise date of the event in question.

How it works

Read the GOV.UK Design System guidance on date inputs (opens in a new tab) for information on hint text, error messages, and accessibility considerations.

HTML examples

Copy the HTML into your web template. Replace schema-name with your CRM field schema name, keeping any suffixes like -hint. This is required for the CRM helper framework to validate and submit data.

Use the input field above each example to enter your schema name. This updates all instances in the code automatically, ensuring no mistakes that could impact validation or accessibility.

For single question pages

If presenting only one question on the page, designate the contents of the legend as the page heading. This practice ensures users of screen readers hear the contents only once.

You will need to include an empty {% title %} block in your web template to remove the default page header and avoid duplication.

What is your date of birth?

For example, 27 3 2021

Day

Month

Year

Update the HTML example

Replace 'schema-name' by entering your CRM field schema name.

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" role="group" aria-describedby="schema-name-hint">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        What is your date of birth?
      </h1>
    </legend>
    <div id="schema-name-hint" class="govuk-hint">
      For example, 27 3 2021
    </div>
    <div class="govuk-date-input">
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-day">
            Day
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-day" name="schema-name" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-month">
            Month
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-month" name="schema-name" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-year">
            Year
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="schema-name-year" name="schema-name" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" role="group" aria-describedby="schema-name-hint">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        What is your date of birth?
      </h1>
    </legend>
    <div id="schema-name-hint" class="govuk-hint">
      For example, 27 3 2021
    </div>
    <div class="govuk-date-input">
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-day">
            Day
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-day" name="schema-name" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-month">
            Month
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-month" name="schema-name" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-year">
            Year
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="schema-name-year" name="schema-name" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

{% endblock %}

For multiple question pages

If presenting more than one question on the page, do not set the contents of the <legend> as the page heading.

Date input for multiple questions

Example
HTML
Web Template

What is your date of birth?

For example, 27 3 2021

Day

Month

Year

Update the HTML example

Replace 'schema-name' by entering your CRM field schema name.

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" role="group" aria-describedby="schema-name-hint">
    <legend class="govuk-fieldset__legend">
      What is your date of birth?
    </legend>
    <div id="schema-name-hint" class="govuk-hint">
      For example, 27 3 2021
    </div>
    <div class="govuk-date-input">
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-day">
            Day
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-day" name="schema-name" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-month">
            Month
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-month" name="schema-name" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-year">
            Year
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="schema-name-year" name="schema-name" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" role="group" aria-describedby="schema-name-hint">
    <legend class="govuk-fieldset__legend">
      What is your date of birth?
    </legend>
    <div id="schema-name-hint" class="govuk-hint">
      For example, 27 3 2021
    </div>
    <div class="govuk-date-input">
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-day">
            Day
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-day" name="schema-name" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-month">
            Month
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-month" name="schema-name" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-year">
            Year
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="schema-name-year" name="schema-name" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

{% endblock %}

Asking for a date of birth

When collecting a date of birth, apply the autocomplete attribute to the date input component. This enables browsers to autofill the information if previously entered by the user.

Set the autocomplete attribute on the day, month, and year inputs to bday-day, bday-month and bday-year respectively.

Date of birth with autocomplete

Example
HTML
Web Template

What is your date of birth?

For example, 27 3 2007

Day

Month

Year

Update the HTML example

Replace 'schema-name' by entering your CRM field schema name.

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" role="group" aria-describedby="schema-name-hint">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        What is your date of birth?
      </h1>
    </legend>
    <div id="schema-name-hint" class="govuk-hint">
      For example, 27 3 2007
    </div>
    <div class="govuk-date-input">
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-day">
            Day
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-day" name="schema-name" type="text" autocomplete="bday-day" inputmode="numeric">
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-month">
            Month
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-month" name="schema-name" type="text" autocomplete="bday-month" inputmode="numeric">
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-year">
            Year
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="schema-name-year" name="schema-name" type="text" autocomplete="bday-year" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" role="group" aria-describedby="schema-name-hint">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        What is your date of birth?
      </h1>
    </legend>
    <div id="schema-name-hint" class="govuk-hint">
      For example, 27 3 2007
    </div>
    <div class="govuk-date-input">
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-day">
            Day
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-day" name="schema-name" type="text" autocomplete="bday-day" inputmode="numeric">
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-month">
            Month
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-month" name="schema-name" type="text" autocomplete="bday-month" inputmode="numeric">
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="schema-name-year">
            Year
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="schema-name-year" name="schema-name" type="text" autocomplete="bday-year" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

{% endblock %}

Additional examples

Additional examples can be found on the GOV.UK Design System date input page (opens in a new tab), including guidance on:

using a calendar or date picker
asking for approximate dates
asking for dates from documents

Error messages

An error message is displayed next to the field and in the error summary when a validation error occurs. The CRM helper framework automatically handles error messages for specific error states.

If a required date part is missing

'[whatever it is] must contain a [day/month/year]'. For example, 'Date of birth must contain a year'.

If a date part is invalid

'[whatever it is] must contain a valid [day/month/year]'. For example, 'Date of birth must contain a valid day'.

If the date is not a real date

'[whatever it is] must be a real date'. For example, 'Date of birth must be a real date'.

If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.