Component

Form date input

Use the date input component to help users enter a memorable date or one they can easily look up.

Search for usage of this component on GitHub.

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:

• Date-input

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)

What is your date of birth?

<%= render "govuk_publishing_components/components/date_input", {
  legend_text: "What is your date of birth?"
} %>

With hint (preview)

What is your date of birth?

For example, 31 3 1980

<%= render "govuk_publishing_components/components/date_input", {
  legend_text: "What is your date of birth?",
  hint: "For example, 31 3 1980"
} %>

With error (preview)

What is your date of birth?

For example, 31 3 1980

Error message goes here

<%= 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)

What is your date of birth?

For example, 31 3 1980

Error 1
Error 2

<%= 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)

Beth yw eich dyddiad geni?

Er enghraifft, 31 3 1980

<%= 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
    }
  ]
} %>