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",
  year: false
}) }}

Date input day and month (with empty item)

Open this example in a new tab: Date input day and month (with 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 day and month (with items)

Open this example in a new tab: Date input day and month (with items)

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 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",
  day: false
}) }}

Date input month and year (with empty item)

Open this example in a new tab: Date input month and year (with 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 items)

Open this example in a new tab: Date input month and year (with items)

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 with pre-defined fields

Open this example in a new tab: Date input month and year with pre-defined fields

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="11" 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="2023" 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",
  day: false,
  month: {
    value: "11"
  },
  year: {
    value: "2023"
  }
}) }}

Date input month and year with pre-defined fields overriding values

Open this example in a new tab: Date input month and year with pre-defined fields overriding 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="11" 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="2023" 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",
  day: false,
  month: {
    value: "11"
  },
  year: {
    value: "2023"
  },
  values: {
    month: "8",
    year: "2024"
  }
}) }}

Date input month and year with pre-defined values

Open this example in a new tab: Date input month and year with pre-defined 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",
  day: false,
  values: {
    month: "8",
    year: "2024"
  }
}) }}

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>
    <span class="nhsuk-error-message" id="example-error">
      <span class="nhsuk-u-visually-hidden">Error:</span> Date of birth must include a day
    </span>
    <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>
    <span class="nhsuk-error-message" id="example-error">
      <span class="nhsuk-u-visually-hidden">Error:</span> Date of birth must include a month
    </span>
    <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>
    <span class="nhsuk-error-message" id="example-error">
      <span class="nhsuk-u-visually-hidden">Error:</span> Date of birth must include a year
    </span>
    <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>
    <span class="nhsuk-error-message" id="example-error">
      <span class="nhsuk-u-visually-hidden">Error:</span> Enter your date of birth
    </span>
    <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>
    <span class="nhsuk-error-message" id="example-error">
      <span class="nhsuk-u-visually-hidden">Error:</span> Enter your date of birth
    </span>
    <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 translations

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

Beth yw eich dyddiad geni?

Er enghraifft, 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">
        Beth yw eich dyddiad geni?
      </h1>
    </legend>
    <div class="nhsuk-hint" id="example-hint">
      Er enghraifft, 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">
            Dydd
          </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">
            Mis
          </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">
            Blwyddyn
          </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: "Beth yw eich dyddiad geni?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "Er enghraifft, 31 3 1980"
  },
  id: "example",
  day: {
    label: "Dydd"
  },
  month: {
    label: "Mis"
  },
  year: {
    label: "Blwyddyn"
  }
}) }}

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"
  }
}) }}