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 field.
3. The month input field can be a dropdown of written months to select from, or an input to enter 1-2 digits.
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

Select a format that assists with data entry

Use a format that matches the format of the information you're asking for. For example, if you are asking for a birth date from a health card, use the Y/M/D format.

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.