Date numeral

Localization

Follow local date format conventions. For example:

• North America: month day, year. 
• Ireland and UK: day month year.

Hint text

• Avoid non-numeric formatting hints like DD/MM/YYYY as they can be confusing for some users with lower digital literacy. Use a real date instead. For example, 15/07/2025.
• Use For example instead of “e.g.” as some users might not understand the abbreviation.

Error messages

• Avoid using current date. Instead, use today's date.
• Spell out the month fully when possible. 
• Learn more in the error messages pattern.

Error message examples for dates

Requirements

Users should be able to:

• Navigate to each input within the component.
• Input a valid date using numeric date format.
• Clearly understand how dates should be formatted through clear labels.

Interactions

Keyboard interactions

• Tab. Moves focus from the previous interactive element on the page to the leading input. 
• Pressing tab again moves focus to the middle input, then to the trailing input.
• Focus should not be moved to the next input as the user types the date.

Design considerations

• The border of the input should have a 3:1 minimum contrast ratio with the background.
• Each input should have a clear, visible label to allow users to know what value to enter in each field.
• Use clear hint text to help users understand what date format to enter.
• Only use the numeral date for memorable dates such as date of birth.  

Development considerations

• The inputs should be grouped within a fieldset to allow screen reader users to understand the relationship between the fields.
• An overall label should be provided by a legend to communicate the purpose of the inputs.
• Using the fieldset and legend negates the need for explicit association of the fields with the hint text.