Date input

Date input

(open in a new window)

Code

Markup

<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="dob-hint" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <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="number" pattern="[0-9]*">
      </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="number" pattern="[0-9]*">
      </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="number" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "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 with errors only

(open in a new window)

Code

Markup

<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="dob-errors-error" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-errors-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </span>
  <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="number" pattern="[0-9]*">
      </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="number" pattern="[0-9]*">
      </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="number" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "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 in a new window)

Code

Markup

<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="dob-errors-hint dob-errors-error" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-errors-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <span id="dob-errors-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </span>
  <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="number" pattern="[0-9]*">
      </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="number" pattern="[0-9]*">
      </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="number" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "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 in a new window)

Code

Markup

<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="dob-day-error-hint dob-day-error-error" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-day-error-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <span id="dob-day-error-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </span>
  <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="number" pattern="[0-9]*">
      </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="number" pattern="[0-9]*">
      </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="number" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "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 in a new window)

Code

Markup

<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="dob-month-error-hint dob-month-error-error" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-month-error-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <span id="dob-month-error-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </span>
  <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="number" pattern="[0-9]*">
      </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="number" pattern="[0-9]*">
      </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="number" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "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 in a new window)

Code

Markup

<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="dob-year-error-hint dob-year-error-error" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-year-error-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <span id="dob-year-error-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </span>
  <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="number" pattern="[0-9]*">
      </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="number" pattern="[0-9]*">
      </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="number" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "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 in a new window)

Code

Markup

<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="dob-hint" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <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="number" pattern="[0-9]*">
      </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="number" pattern="[0-9]*">
      </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="number" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "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 in a new window)

Code

Markup

<div class="govuk-form-group extra-class">
<fieldset class="govuk-fieldset" aria-describedby="dob-hint" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <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="number" pattern="[0-9]*">
      </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="number" pattern="[0-9]*">
      </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="number" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "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 in a new window)

Code

Markup

<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="dob-with-autocomplete-attribute-hint" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-with-autocomplete-attribute-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <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="number" autocomplete="bday-day" pattern="[0-9]*">
      </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="number" autocomplete="bday-month" pattern="[0-9]*">
      </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="number" autocomplete="bday-year" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "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 in a new window)

Code

Markup

<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="dob-with-input-attributes-hint" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-with-input-attributes-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <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="number" pattern="[0-9]*" 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="number" pattern="[0-9]*" 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="number" pattern="[0-9]*" data-example-year="year">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "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"
      }
    }
  ]
}) }}