Date input
<gcds-date-input>

Also called: dates, dateinput, date, memorable date.

A date input is a space to enter a known date.

• GitHub
• Figma

Date input anatomy

1. The fieldset legend states the information a person should enter in the date input field. Text is left-aligned and in sentence case (only the initial letter is capitalized). For the date input component, the fieldset is typically labelled as "date" or with the specific date type sought. The hint text shows the format of the date.
2. The month label identifies the month select field.
3. The month select field field provides a predefined, chronological list of months for a person to select from.
4. The day label identifies the day input.
5. The day input field can be 1 or 2 digits.
6. The year label identifies the year input field.
7. The year input field is limited to 4 digits.

Design and accessibility for date inputs

Support task success with hint text

Use the hint text in the fieldset legend to help a person understand the format they can use to enter the date. For example, showing a single digit number without a leading zero, like September 7, rather than September 07 shows that a leading zero is not needed.

Write specific error messages

Write error messages for each field of the date input. Error messages must provide information on what is missing or on incorrect formatting. For example, if the year was input using 2 digits, state that the year should be 4 digits.