Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Date input

These examples are used for automated tests and may not follow service manual best practice.

Date input default

Open this example in a new tab: Date input default

What is your date of birth?

For example, 31 3 1980
Code

Markup

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

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "What is your date of birth?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  },
  id: "example"
}) }}

Date input day and month

Open this example in a new tab: Date input day and month

What is your birthday?

For example, 5 12
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" role="group" aria-describedby="example-hint">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        What is your birthday?
      </h1>
    </legend>
    <div class="nhsuk-hint" id="example-hint">
      For example, 5 12
    </div>
    <div class="nhsuk-date-input" id="example">
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-day">
            Day
          </label>
          <input class="nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input" id="example-day" name="day" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-month">
            Month
          </label>
          <input class="nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input" id="example-month" name="month" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "What is your birthday?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 5 12"
  },
  id: "example",
  items: [
    {
      name: "day",
      width: 2
    },
    {
      name: "month",
      width: 2
    }
  ]
}) }}

Date input day and month (empty item)

Open this example in a new tab: Date input day and month (empty item)

What is your birthday?

For example, 5 12
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" role="group" aria-describedby="example-hint">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        What is your birthday?
      </h1>
    </legend>
    <div class="nhsuk-hint" id="example-hint">
      For example, 5 12
    </div>
    <div class="nhsuk-date-input" id="example">
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-day">
            Day
          </label>
          <input class="nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input" id="example-day" name="day" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-month">
            Month
          </label>
          <input class="nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input" id="example-month" name="month" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "What is your birthday?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 5 12"
  },
  id: "example",
  items: [
    {
      name: "day",
      width: 2
    },
    {
      name: "month",
      width: 2
    },
    false
  ]
}) }}

Date input with size S legend

Open this example in a new tab: Date input with size S legend

What is your date of birth?

For example, 31 3 1980
Code

Markup

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

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "What is your date of birth?",
      size: "s",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  },
  id: "custom-size"
}) }}

Date input with size M legend

Open this example in a new tab: Date input with size M legend

What is your date of birth?

For example, 31 3 1980
Code

Markup

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

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "What is your date of birth?",
      size: "m",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  },
  id: "custom-size"
}) }}

Date input with size L legend

Open this example in a new tab: Date input with size L legend

What is your date of birth?

For example, 31 3 1980
Code

Markup

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

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "What is your date of birth?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  },
  id: "custom-size"
}) }}

Date input with size XL legend

Open this example in a new tab: Date input with size XL legend

What is your date of birth?

For example, 31 3 1980
Code

Markup

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

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "What is your date of birth?",
      size: "xl",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  },
  id: "custom-size"
}) }}

Date input month and year

Open this example in a new tab: Date input month and year

When did you start your job?

For example, 11 2023
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" role="group" aria-describedby="example-hint">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        When did you start your job?
      </h1>
    </legend>
    <div class="nhsuk-hint" id="example-hint">
      For example, 11 2023
    </div>
    <div class="nhsuk-date-input" id="example">
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-month">
            Month
          </label>
          <input class="nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input" id="example-month" name="month" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-year">
            Year
          </label>
          <input class="nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input" id="example-year" name="year" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "When did you start your job?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 11 2023"
  },
  id: "example",
  items: [
    {
      name: "month",
      width: 2
    },
    {
      name: "year",
      width: 4
    }
  ]
}) }}

Date input month and year (empty item)

Open this example in a new tab: Date input month and year (empty item)

When did you start your job?

For example, 11 2023
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" role="group" aria-describedby="example-hint">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        When did you start your job?
      </h1>
    </legend>
    <div class="nhsuk-hint" id="example-hint">
      For example, 11 2023
    </div>
    <div class="nhsuk-date-input" id="example">
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-month">
            Month
          </label>
          <input class="nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input" id="example-month" name="month" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-year">
            Year
          </label>
          <input class="nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input" id="example-year" name="year" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "When did you start your job?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 11 2023"
  },
  id: "example",
  items: [
    false,
    {
      name: "month",
      width: 2
    },
    {
      name: "year",
      width: 4
    }
  ]
}) }}

Date input month and year with values

Open this example in a new tab: Date input month and year with values

When did you start your job?

For example, 11 2023
Code

Markup

<div class="nhsuk-form-group">
  <fieldset class="nhsuk-fieldset" role="group" aria-describedby="example-hint">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        When did you start your job?
      </h1>
    </legend>
    <div class="nhsuk-hint" id="example-hint">
      For example, 11 2023
    </div>
    <div class="nhsuk-date-input" id="example">
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-month">
            Month
          </label>
          <input class="nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input" id="example-month" name="month" type="text" value="8" inputmode="numeric">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-year">
            Year
          </label>
          <input class="nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input" id="example-year" name="year" type="text" value="2024" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "When did you start your job?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 11 2023"
  },
  id: "example",
  values: {
    month: "8",
    year: "2024"
  },
  items: [
    {
      name: "month",
      width: 2
    },
    {
      name: "year",
      width: 4
    }
  ]
}) }}

Date input with autocomplete values

Open this example in a new tab: Date input with autocomplete values

What is your date of birth?

For example, 31 3 1980
Code

Markup

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

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "What is your date of birth?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  },
  id: "example",
  items: [
    {
      name: "day",
      width: 2,
      autocomplete: "bday-day"
    },
    {
      name: "month",
      width: 2,
      autocomplete: "bday-month"
    },
    {
      name: "year",
      width: 4,
      autocomplete: "bday-year"
    }
  ]
}) }}

Date input with custom name prefix

Open this example in a new tab: Date input with custom name prefix

What is your date of birth?

For example, 31 3 1980
Code

Markup

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

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "What is your date of birth?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  },
  id: "example",
  namePrefix: "example"
}) }}

Date input with error on day input

Open this example in a new tab: Date input with error on day input

What is your date of birth?

For example, 31 3 1980

Error: Date of birth must include a day

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" role="group" aria-describedby="example-hint example-error">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        What is your date of birth?
      </h1>
    </legend>
    <div class="nhsuk-hint" id="example-hint">
      For example, 31 3 1980
    </div>
    <p class="nhsuk-error-message" id="example-error">
      <span class="nhsuk-u-visually-hidden">Error:</span> Date of birth must include a day
    </p>
    <div class="nhsuk-date-input" id="example">
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-day">
            Day
          </label>
          <input class="nhsuk-input nhsuk-input--width-2 nhsuk-input--error nhsuk-date-input__input" id="example-day" name="day" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-month">
            Month
          </label>
          <input class="nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input" id="example-month" name="month" type="text" value="3" inputmode="numeric">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-year">
            Year
          </label>
          <input class="nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input" id="example-year" name="year" type="text" value="1980" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "What is your date of birth?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  },
  errorMessage: {
    text: "Date of birth must include a day"
  },
  id: "example",
  items: [
    {
      name: "day",
      width: 2,
      error: true
    },
    {
      name: "month",
      value: "3",
      width: 2
    },
    {
      name: "year",
      value: "1980",
      width: 4
    }
  ]
}) }}

Date input with error on month input

Open this example in a new tab: Date input with error on month input

What is your date of birth?

For example, 31 3 1980

Error: Date of birth must include a month

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" role="group" aria-describedby="example-hint example-error">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        What is your date of birth?
      </h1>
    </legend>
    <div class="nhsuk-hint" id="example-hint">
      For example, 31 3 1980
    </div>
    <p class="nhsuk-error-message" id="example-error">
      <span class="nhsuk-u-visually-hidden">Error:</span> Date of birth must include a month
    </p>
    <div class="nhsuk-date-input" id="example">
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-day">
            Day
          </label>
          <input class="nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input" id="example-day" name="day" type="text" value="31" inputmode="numeric">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-month">
            Month
          </label>
          <input class="nhsuk-input nhsuk-input--width-2 nhsuk-input--error nhsuk-date-input__input" id="example-month" name="month" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-year">
            Year
          </label>
          <input class="nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input" id="example-year" name="year" type="text" value="1980" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "What is your date of birth?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  },
  errorMessage: {
    text: "Date of birth must include a month"
  },
  id: "example",
  items: [
    {
      name: "day",
      width: 2,
      value: "31"
    },
    {
      name: "month",
      width: 2,
      error: true
    },
    {
      name: "year",
      width: 4,
      value: "1980"
    }
  ]
}) }}

Date input with error on year input

Open this example in a new tab: Date input with error on year input

What is your date of birth?

For example, 31 3 1980

Error: Date of birth must include a year

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" role="group" aria-describedby="example-hint example-error">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        What is your date of birth?
      </h1>
    </legend>
    <div class="nhsuk-hint" id="example-hint">
      For example, 31 3 1980
    </div>
    <p class="nhsuk-error-message" id="example-error">
      <span class="nhsuk-u-visually-hidden">Error:</span> Date of birth must include a year
    </p>
    <div class="nhsuk-date-input" id="example">
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-day">
            Day
          </label>
          <input class="nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input" id="example-day" name="day" type="text" value="31" inputmode="numeric">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-month">
            Month
          </label>
          <input class="nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input" id="example-month" name="month" type="text" value="3" inputmode="numeric">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-year">
            Year
          </label>
          <input class="nhsuk-input nhsuk-input--width-4 nhsuk-input--error nhsuk-date-input__input" id="example-year" name="year" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "What is your date of birth?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  },
  errorMessage: {
    text: "Date of birth must include a year"
  },
  id: "example",
  items: [
    {
      name: "day",
      width: 2,
      value: "31"
    },
    {
      name: "month",
      width: 2,
      value: "3"
    },
    {
      name: "year",
      width: 4,
      error: true
    }
  ]
}) }}

Date input with errors and hint

Open this example in a new tab: Date input with errors and hint

What is your date of birth?

For example, 31 3 1980

Error: Enter your date of birth

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" role="group" aria-describedby="example-hint example-error">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        What is your date of birth?
      </h1>
    </legend>
    <div class="nhsuk-hint" id="example-hint">
      For example, 31 3 1980
    </div>
    <p class="nhsuk-error-message" id="example-error">
      <span class="nhsuk-u-visually-hidden">Error:</span> Enter your date of birth
    </p>
    <div class="nhsuk-date-input" id="example">
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-day">
            Day
          </label>
          <input class="nhsuk-input nhsuk-input--width-2 nhsuk-input--error nhsuk-date-input__input" id="example-day" name="day" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-month">
            Month
          </label>
          <input class="nhsuk-input nhsuk-input--width-2 nhsuk-input--error nhsuk-date-input__input" id="example-month" name="month" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-year">
            Year
          </label>
          <input class="nhsuk-input nhsuk-input--width-4 nhsuk-input--error nhsuk-date-input__input" id="example-year" name="year" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "What is your date of birth?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  },
  errorMessage: {
    text: "Enter your date of birth"
  },
  id: "example",
  items: [
    {
      name: "day",
      width: 2,
      error: true
    },
    {
      name: "month",
      width: 2,
      error: true
    },
    {
      name: "year",
      width: 4,
      error: true
    }
  ]
}) }}

Date input with errors only

Open this example in a new tab: Date input with errors only

What is your date of birth?

Error: Enter your date of birth

Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" role="group" aria-describedby="example-error">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        What is your date of birth?
      </h1>
    </legend>
    <p class="nhsuk-error-message" id="example-error">
      <span class="nhsuk-u-visually-hidden">Error:</span> Enter your date of birth
    </p>
    <div class="nhsuk-date-input" id="example">
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-day">
            Day
          </label>
          <input class="nhsuk-input nhsuk-input--width-2 nhsuk-input--error nhsuk-date-input__input" id="example-day" name="day" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-month">
            Month
          </label>
          <input class="nhsuk-input nhsuk-input--width-2 nhsuk-input--error nhsuk-date-input__input" id="example-month" name="month" type="text" inputmode="numeric">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="example-year">
            Year
          </label>
          <input class="nhsuk-input nhsuk-input--width-4 nhsuk-input--error nhsuk-date-input__input" id="example-year" name="year" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "What is your date of birth?",
      size: "l",
      isPageHeading: true
    }
  },
  errorMessage: {
    text: "Enter your date of birth"
  },
  id: "example",
  items: [
    {
      name: "day",
      width: 2,
      error: true
    },
    {
      name: "month",
      width: 2,
      error: true
    },
    {
      name: "year",
      width: 4,
      error: true
    }
  ]
}) }}

Date input without page heading

Open this example in a new tab: Date input without page heading

What is your date of birth?
For example, 31 3 1980
Code

Markup

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

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "What is your date of birth?"
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  },
  id: "example"
}) }}

Date input with values

Open this example in a new tab: Date input with values

What is your date of birth?

For example, 31 3 1980
Code

Markup

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

Macro

{% from "date-input/macro.njk" import dateInput -%}

{{ dateInput({
  fieldset: {
    legend: {
      text: "What is your date of birth?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  },
  id: "example",
  values: {
    day: "5",
    month: "8",
    year: "2024"
  }
}) }}