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.

Overview

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

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

See all standard options

• id - accepts a string for the element ID attribute
• data_attributes - accepts a hash of data attributes
• aria - accepts a hash of aria attributes
• classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
• margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale
• role - accepts a space separated string of roles
• lang - accepts a language attribute value
• open - accepts an open attribute value (true or false)
• hidden - accepts an empty string, ‘hidden’, or ‘until-found’
• tabindex - accepts an integer. The integer can also be passed as a string
• dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
• type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
• rel - accepts any valid rel attribute e.g. ‘nofollow’
• target - accepts a valid target attribute e.g. ‘_blank’
• title - accepts any string
• draggable - accepts a draggable attribute value (“true” or “false”)

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 legend level and size (preview)

Valid options for level are 1 to 6. Valid options for size are s, m, l and xl.

What is your date of birth?

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

With hint (preview)

When hint text is rendered each input field takes the value of hint_id as a value for the aria-describedby attribute

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)

When an error message is rendered each input field takes the value of error_id as a value for the aria-describedby attribute. Note that error_id is optional, if it is not passed one will be generated automatically.

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_id: "error_item_id",
  error_message: "Error message goes here"
} %>

With error items (preview)

When error messages are rendered each input field takes the value of error_id as a value for the aria-describedby attribute. Note that error_id is optional, if it is not passed one will be generated automatically.

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_id: "error_id",
  error_items: [
    {
      text: "Error 1"
    },
    {
      text: "Error 2"
    }
  ]
} %>

With error id but no message (preview)

For some instances of this component the error message should be rendered separately but an error state is still required. In this scenario an error_id can be passed without an error_message to highlight the component and set aria-describedby correctly.

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",
  error_id: "error_id"
} %>

With data attributes (preview)

<%= render "govuk_publishing_components/components/date_input", {
  data_attributes: {
    module: "some-module",
    other_attribute: "something-else"
  }
} %>

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