Component
Form date input
Use the date input component to help users enter a memorable date or one they can easily look up.
How it looks (preview) (preview all)
How to call this component
<%= render "govuk_publishing_components/components/date_input", {
} %>
GOV.UK Design System
This component incorporates components from the GOV.UK Design System:
Accessibility acceptance criteria
Inputs in the component must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- be usable with touch
- indicate when they have focus
- be recognisable as form input elements
- have correctly associated labels
- be of the appropriate type for their use, in this case ‘number’
Labels use the label component.
Avoid using autofocus and tabindex unless you have user research to support this behaviour.
Other examples
With name (preview)
Settting a name at the component level helps generating the name for each individual input within the
component as follows: custom-name[day]
, custom-name[month]
, custom-name[year]
<%= render "govuk_publishing_components/components/date_input", {
name: "dob"
} %>
With legend (preview)
<%= render "govuk_publishing_components/components/date_input", {
legend_text: "What is your date of birth?"
} %>
With hint (preview)
<%= render "govuk_publishing_components/components/date_input", {
legend_text: "What is your date of birth?",
hint: "For example, 31 3 1980"
} %>
With error (preview)
<%= render "govuk_publishing_components/components/date_input", {
legend_text: "What is your date of birth?",
hint: "For example, 31 3 1980",
error_message: "Error message goes here"
} %>
With error items (preview)
<%= render "govuk_publishing_components/components/date_input", {
legend_text: "What is your date of birth?",
hint: "For example, 31 3 1980",
error_items: [
{
text: "Error 1"
},
{
text: "Error 2"
}
]
} %>
With custom items (preview)
<%= render "govuk_publishing_components/components/date_input", {
legend_text: "Beth yw eich dyddiad geni?",
hint: "Er enghraifft, 31 3 1980",
items: [
{
label: "Dydd",
name: "dob-dydd",
width: 2,
value: 31
},
{
label: "Mis",
name: "dob-mis",
width: 2,
value: 3
},
{
label: "Blwyddyn",
name: "dob-blwyddyn",
width: 4,
value: 1980
}
]
} %>