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 autocomplete for date of birth fields (preview)

Use the autocomplete_date_of_birth option when you’re asking for the user’s date of birth. This supports browsers or tools that can autofill the information on a user’s behalf if they’ve entered it previously.

Note that the option should only be passed to the component if the date of birth asked for is the date of birth of the person filling the form in and not asked for on behalf of someone else.

<%= render "govuk_publishing_components/components/date_input", {
  autocomplete_date_of_birth: true
} %>

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