Dates

Updated May 23, 2026

We offer 3 component types for selecting or inputting dates:

States

Warning

States are visual indicators used to communicate a component’s interaction status. Learn more about commonly used component states in our General specs

Best practices

Allow a user to enter dates in shorthand or common formats. Convert dates to a format accepted by the database behind the scenes. See guidelines for capturing numeric data.
Do not use placeholder text as it can cause usability and accessibility issues. Use a descriptive label and hint text instead. See the guidelines for using placeholder text.
Change a permanently read-only date field to formatted text with no field border.

Localization

Follow local date format conventions. For example:

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

Labels

For months and days of the week, use three-letter abbreviations with initial capitalization and no period.
Mon, Tue, Wed, Thu, Fri, Sat, Sun
Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec
If space is limited, you can use one-letter or two-letter abbreviations for days of the week.
Su, Mo, Tu, We, Th, Fr, Sa
S, M, T, W, T, F, S

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 and use today's date instead.
Spell out the month.
Learn more in the error messages pattern

Error message examples for dates

Use case	Example error messages
No date in a required date input.	Enter a date of birth.
The date is incomplete.	Enter a date that includes a month.Enter a date that includes a day and month.Enter a year in the format XXXX.
The date is not correct. For example, 13/13/13.	Enter a month that is between 1 and 12.
The date is in the future but needs to be today or in the past.	Enter a date that is today or in the past.
The date is in the past but needs to be today or in the future.	Enter a date that is today or in the future.
The date must be after another date.	Enter a date that is after 1 September 2024.
The date must be between 2 dates.	Enter a date that is between 1 September 2024 and 30 September 2024.

Hint text

Use an aria describedby to make sure the required date format is communicated to screen reader users.

Date	Changes
August 2025	Created overview page to align with other component guidance.