Sha256: c2f84d965d2853bcf401e6dd71a9e7bf3cd3fdbf06bc2fcb4e1dbb1496b44ddc
Contents?: true
Size: 1.93 KB
Versions: 14
Compression:
Stored size: 1.93 KB
Contents
name: Form date input
description: Use the date input component to help users enter a memorable date or one they can easily look up.
accessibility_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](/component-guide/label).
Avoid using [`autofocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) and `tabindex` unless you have user research to support this behaviour.
govuk_frontend_components:
- date-input
examples:
default:
data: {}
with_name:
description: |
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]`
data:
name: "dob"
with_legend:
data:
legend_text: "What is your date of birth?"
with_hint:
data:
legend_text: "What is your date of birth?"
hint: "For example, 31 3 1980"
with_error:
data:
legend_text: "What is your date of birth?"
hint: "For example, 31 3 1980"
error_message: "Error message goes here"
with_error_items:
data:
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:
data:
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
Version data entries
14 entries across 14 versions & 1 rubygems