This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Feature flags

Feature flag control

This is an experimental feature for turning the 'rebrand' feature flag on and off only.

Show all flag states

Skip to main content

Date input

Date input

Open this example in a new tab: Date inputoff

Code

Markup

<div class="govuk-form-group">
  <div class="govuk-date-input" id="dob">
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-day">
          Day
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="day" 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="dob-month">
          Month
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="month" 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="dob-year">
          Year
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="year" type="text" inputmode="numeric">
      </div>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/date-input/macro.njk" import govukDateInput %}

{{ govukDateInput({
  id: "dob"
}) }}

Date input complete question

Open this example in a new tab: Date input complete questionoff

Code

Markup

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

Macro

{% from "govuk/components/date-input/macro.njk" import govukDateInput %}

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

Date input day and month

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

Code

Markup

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

Macro

{% from "govuk/components/date-input/macro.njk" import govukDateInput %}

{{ govukDateInput({
  id: "bday",
  namePrefix: "bday",
  fieldset: {
    legend: {
      text: "What is your birthday?"
    }
  },
  hint: {
    text: "For example, 5 12"
  },
  items: [
    {
      name: "day",
      classes: "govuk-input--width-2"
    },
    {
      name: "month",
      classes: "govuk-input--width-2"
    }
  ]
}) }}

Date input month and year

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

Code

Markup

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint">
    <legend class="govuk-fieldset__legend">
      When did you move to this property?
    </legend>
    <div id="dob-hint" class="govuk-hint">
      For example, 3 1980
    </div>
    <div class="govuk-date-input" id="dob">
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="dob-month">
            Month
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" 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="dob-year">
            Year
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Macro

{% from "govuk/components/date-input/macro.njk" import govukDateInput %}

{{ govukDateInput({
  id: "dob",
  namePrefix: "dob",
  fieldset: {
    legend: {
      text: "When did you move to this property?"
    }
  },
  hint: {
    text: "For example, 3 1980"
  },
  items: [
    {
      name: "month",
      classes: "govuk-input--width-2"
    },
    {
      name: "year",
      classes: "govuk-input--width-4"
    }
  ]
}) }}

Date input with errors only

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

Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-errors-error">
    <legend class="govuk-fieldset__legend">
      What is your date of birth?
    </legend>
    <p id="dob-errors-error" class="govuk-error-message">
      <span class="govuk-visually-hidden">Error:</span> Error message goes here
    </p>
    <div class="govuk-date-input" id="dob-errors">
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="dob-errors-day">
            Day
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-day" name="day" 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="dob-errors-month">
            Month
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-month" name="month" 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="dob-errors-year">
            Year
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-errors-year" name="year" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Macro

{% from "govuk/components/date-input/macro.njk" import govukDateInput %}

{{ govukDateInput({
  id: "dob-errors",
  fieldset: {
    legend: {
      text: "What is your date of birth?"
    }
  },
  errorMessage: {
    text: "Error message goes here"
  },
  items: [
    {
      name: "day",
      classes: "govuk-input--width-2 govuk-input--error"
    },
    {
      name: "month",
      classes: "govuk-input--width-2 govuk-input--error"
    },
    {
      name: "year",
      classes: "govuk-input--width-4 govuk-input--error"
    }
  ]
}) }}

Date input with errors and hint

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

Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-errors-hint dob-errors-error">
    <legend class="govuk-fieldset__legend">
      What is your date of birth?
    </legend>
    <div id="dob-errors-hint" class="govuk-hint">
      For example, 31 3 1980
    </div>
    <p id="dob-errors-error" class="govuk-error-message">
      <span class="govuk-visually-hidden">Error:</span> Error message goes here
    </p>
    <div class="govuk-date-input" id="dob-errors">
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="dob-errors-day">
            Day
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-day" name="day" 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="dob-errors-month">
            Month
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-month" name="month" 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="dob-errors-year">
            Year
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-errors-year" name="year" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Macro

{% from "govuk/components/date-input/macro.njk" import govukDateInput %}

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

Date input with error on day input

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

Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-day-error-hint dob-day-error-error">
    <legend class="govuk-fieldset__legend">
      What is your date of birth?
    </legend>
    <div id="dob-day-error-hint" class="govuk-hint">
      For example, 31 3 1980
    </div>
    <p id="dob-day-error-error" class="govuk-error-message">
      <span class="govuk-visually-hidden">Error:</span> Error message goes here
    </p>
    <div class="govuk-date-input" id="dob-day-error">
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="dob-day-error-day">
            Day
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-day-error-day" name="dob-day-error-day" 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="dob-day-error-month">
            Month
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day-error-month" name="dob-day-error-month" 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="dob-day-error-year">
            Year
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-day-error-year" name="dob-day-error-year" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Macro

{% from "govuk/components/date-input/macro.njk" import govukDateInput %}

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

Date input with error on month input

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

Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-month-error-hint dob-month-error-error">
    <legend class="govuk-fieldset__legend">
      What is your date of birth?
    </legend>
    <div id="dob-month-error-hint" class="govuk-hint">
      For example, 31 3 1980
    </div>
    <p id="dob-month-error-error" class="govuk-error-message">
      <span class="govuk-visually-hidden">Error:</span> Error message goes here
    </p>
    <div class="govuk-date-input" id="dob-month-error">
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="dob-month-error-day">
            Day
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month-error-day" name="dob-month-error-day" 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="dob-month-error-month">
            Month
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-month-error-month" name="dob-month-error-month" 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="dob-month-error-year">
            Year
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-month-error-year" name="dob-month-error-year" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Macro

{% from "govuk/components/date-input/macro.njk" import govukDateInput %}

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

Date input with error on year input

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

Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-year-error-hint dob-year-error-error">
    <legend class="govuk-fieldset__legend">
      What is your date of birth?
    </legend>
    <div id="dob-year-error-hint" class="govuk-hint">
      For example, 31 3 1980
    </div>
    <p id="dob-year-error-error" class="govuk-error-message">
      <span class="govuk-visually-hidden">Error:</span> Error message goes here
    </p>
    <div class="govuk-date-input" id="dob-year-error">
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="dob-year-error-day">
            Day
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-year-error-day" name="dob-year-error-day" 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="dob-year-error-month">
            Month
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-year-error-month" name="dob-year-error-month" 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="dob-year-error-year">
            Year
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-year-error-year" name="dob-year-error-year" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Macro

{% from "govuk/components/date-input/macro.njk" import govukDateInput %}

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

Date input with default items

Open this example in a new tab: Date input with default itemsoff

Code

Markup

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

Macro

{% from "govuk/components/date-input/macro.njk" import govukDateInput %}

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

Date input with optional form-group classes

Open this example in a new tab: Date input with optional form-group classesoff

Code

Markup

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

Macro

{% from "govuk/components/date-input/macro.njk" import govukDateInput %}

{{ govukDateInput({
  id: "dob",
  namePrefix: "dob",
  fieldset: {
    legend: {
      text: "What is your date of birth?"
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  },
  formGroup: {
    classes: "extra-class"
  }
}) }}

Date input with autocomplete values

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

Code

Markup

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

Macro

{% from "govuk/components/date-input/macro.njk" import govukDateInput %}

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

Date input with input attributes

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

Code

Markup

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

Macro

{% from "govuk/components/date-input/macro.njk" import govukDateInput %}

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