Date input
Date input
Code
Markup
<div class="govuk-form-group">
<div class="govuk-date-input" id="date-input">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="date-input-day">
Day
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="date-input-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="date-input-month">
Month
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="date-input-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="date-input-year">
Year
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-4" id="date-input-year" name="year" type="text" inputmode="numeric">
</div>
</div>
</div>
</div>Macro
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
{{ govukDateInput(undefined) }}Date input complete question
Open this example in a new tab: date input complete question
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
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
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
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 hint
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 input
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 input
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 input
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 items
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 classes
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 values
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 attributes
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"
}
}
]
}) }}