Date input examples

• # default

  Open this example in a new tab

  What is your date of birth?

  For example, 31 3 1980

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

  
  {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
  
  {{ govukDateInput({
    "id": "dob",
    "fieldset": {
      "legend": {
        "text": "What is your date of birth?"
      }
    },
    "hint": {
      "text": "For example, 31 3 1980"
    }
  }) }}
          

• # day and month

  Open this example in a new tab

  What is your birthday?

  For example, 5 12

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

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

• # month and year

  Open this example in a new tab

  When did you move to this property?

  For example, 3 1980

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

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

• # with errors only

  Open this example in a new tab

  What is your date of birth?

  Error message goes here

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

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

• # with errors and hint

  Open this example in a new tab

  What is your date of birth?

  For example, 31 3 1980

  Error message goes here

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

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

• # with error on day input

  Open this example in a new tab

  What is your date of birth?

  For example, 31 3 1980

  Error message goes here

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

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

• # with error on month input

  Open this example in a new tab

  What is your date of birth?

  For example, 31 3 1980

  Error message goes here

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

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

• # with error on year input

  Open this example in a new tab

  What is your date of birth?

  For example, 31 3 1980

  Error message goes here

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

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

• # classes

  Open this example in a new tab

  {
    "id": "with-classes",
    "classes": "app-date-input--custom-modifier"
  }

  
  {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
  
  {{ govukDateInput({
    "id": "with-classes",
    "classes": "app-date-input--custom-modifier"
  }) }}
          

• # attributes

  Open this example in a new tab

  {
    "id": "with-attributes",
    "attributes": {
      "data-attribute": "my data value"
    }
  }

  
  {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
  
  {{ govukDateInput({
    "id": "with-attributes",
    "attributes": {
      "data-attribute": "my data value"
    }
  }) }}
          

• # with items

  Open this example in a new tab

  What is your date of birth?

  For example, 31 3 1980

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

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

• # with empty items

  Open this example in a new tab

  {
    "id": "with-empty-items",
    "items": []
  }

  
  {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
  
  {{ govukDateInput({
    "id": "with-empty-items",
    "items": []
  }) }}
          

• # custom pattern

  Open this example in a new tab

  {
    "id": "with-custom-pattern",
    "items": [
      {
        "name": "day",
        "pattern": "[0-8]*"
      }
    ]
  }

  
  {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
  
  {{ govukDateInput({
    "id": "with-custom-pattern",
    "items": [
      {
        "name": "day",
        "pattern": "[0-8]*"
      }
    ]
  }) }}
          

• # custom inputmode

  Open this example in a new tab

  {
    "id": "with-custom-inputmode",
    "items": [
      {
        "name": "day",
        "pattern": "[0-9X]*",
        "inputmode": "text"
      }
    ]
  }

  
  {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
  
  {{ govukDateInput({
    "id": "with-custom-inputmode",
    "items": [
      {
        "name": "day",
        "pattern": "[0-9X]*",
        "inputmode": "text"
      }
    ]
  }) }}
          

• # with nested name

  Open this example in a new tab

  {
    "id": "with-nested-name",
    "items": [
      {
        "name": "day[dd]"
      },
      {
        "name": "month[mm]"
      },
      {
        "name": "year[yyyy]"
      }
    ]
  }

  
  {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
  
  {{ govukDateInput({
    "id": "with-nested-name",
    "items": [
      {
        "name": "day[dd]"
      },
      {
        "name": "month[mm]"
      },
      {
        "name": "year[yyyy]"
      }
    ]
  }) }}
          

• # with id on items

  Open this example in a new tab

  {
    "id": "with-item-id",
    "items": [
      {
        "id": "day",
        "name": "day"
      },
      {
        "id": "month",
        "name": "month"
      },
      {
        "id": "year",
        "name": "year"
      }
    ]
  }

  
  {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
  
  {{ govukDateInput({
    "id": "with-item-id",
    "items": [
      {
        "id": "day",
        "name": "day"
      },
      {
        "id": "month",
        "name": "month"
      },
      {
        "id": "year",
        "name": "year"
      }
    ]
  }) }}
          

• # suffixed id

  Open this example in a new tab

  {
    "id": "my-date-input",
    "items": [
      {
        "name": "day"
      },
      {
        "name": "month"
      },
      {
        "name": "year"
      }
    ]
  }

  
  {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
  
  {{ govukDateInput({
    "id": "my-date-input",
    "items": [
      {
        "name": "day"
      },
      {
        "name": "month"
      },
      {
        "name": "year"
      }
    ]
  }) }}
          

• # with values

  Open this example in a new tab

  {
    "id": "with-values",
    "items": [
      {
        "id": "day",
        "name": "day"
      },
      {
        "id": "month",
        "name": "month"
      },
      {
        "id": "year",
        "name": "year",
        "value": 2018
      }
    ]
  }

  
  {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
  
  {{ govukDateInput({
    "id": "with-values",
    "items": [
      {
        "id": "day",
        "name": "day"
      },
      {
        "id": "month",
        "name": "month"
      },
      {
        "id": "year",
        "name": "year",
        "value": 2018
      }
    ]
  }) }}
          

• # with hint and describedBy

  Open this example in a new tab

  What is your date of birth?

  For example, 31 3 1980

  {
    "id": "dob-errors",
    "fieldset": {
      "describedBy": "test-target-element",
      "legend": {
        "text": "What is your date of birth?"
      }
    },
    "hint": {
      "text": "For example, 31 3 1980"
    }
  }

  
  {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
  
  {{ govukDateInput({
    "id": "dob-errors",
    "fieldset": {
      "describedBy": "test-target-element",
      "legend": {
        "text": "What is your date of birth?"
      }
    },
    "hint": {
      "text": "For example, 31 3 1980"
    }
  }) }}
          

• # with error and describedBy

  Open this example in a new tab

  What is your date of birth?

  Error message goes here

  {
    "id": "dob-errors",
    "fieldset": {
      "describedBy": "test-target-element",
      "legend": {
        "text": "What is your date of birth?"
      }
    },
    "errorMessage": {
      "text": "Error message goes here"
    }
  }

  
  {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
  
  {{ govukDateInput({
    "id": "dob-errors",
    "fieldset": {
      "describedBy": "test-target-element",
      "legend": {
        "text": "What is your date of birth?"
      }
    },
    "errorMessage": {
      "text": "Error message goes here"
    }
  }) }}
          

• # fieldset html

  Open this example in a new tab

  What is your date of birth?

  {
    "id": "with-fieldset-html",
    "fieldset": {
      "legend": {
        "html": "What is your <b>date of birth</b>?"
      }
    }
  }

  
  {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
  
  {{ govukDateInput({
    "id": "with-fieldset-html",
    "fieldset": {
      "legend": {
        "html": "What is your <b>date of birth</b>?"
      }
    }
  }) }}
          

• # items with classes

  Open this example in a new tab

  {
    "id": "with-item-classes",
    "items": [
      {
        "name": "day",
        "classes": "app-date-input__day"
      },
      {
        "name": "month",
        "classes": "app-date-input__month"
      },
      {
        "name": "year",
        "classes": "app-date-input__year"
      }
    ]
  }

  
  {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
  
  {{ govukDateInput({
    "id": "with-item-classes",
    "items": [
      {
        "name": "day",
        "classes": "app-date-input__day"
      },
      {
        "name": "month",
        "classes": "app-date-input__month"
      },
      {
        "name": "year",
        "classes": "app-date-input__year"
      }
    ]
  }) }}
          

• # items without classes

  Open this example in a new tab

  {
    "id": "without-item-classes",
    "items": [
      {
        "name": "day"
      },
      {
        "name": "month"
      },
      {
        "name": "year"
      }
    ]
  }

  
  {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
  
  {{ govukDateInput({
    "id": "without-item-classes",
    "items": [
      {
        "name": "day"
      },
      {
        "name": "month"
      },
      {
        "name": "year"
      }
    ]
  }) }}
          

• # with optional form-group classes

  Open this example in a new tab

  What is your date of birth?

  For example, 31 3 1980

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

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

• # with autocomplete values

  Open this example in a new tab

  What is your date of birth?

  For example, 31 3 1980

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

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

• # with input attributes

  Open this example in a new tab

  What is your date of birth?

  For example, 31 3 1980

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

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