Date input

Usage

Use the date input component to let users enter memorable dates, like dates of birth. The date input component consists of three fields grouped together, to let users enter a day, month and year.

This approach is advised in most cases because it allows for precise input and reduces the chances of making mistakes.

Do:

• adjust the order of day, month, and year fields according to the regional format familiar to your users.
• accept month names written out in full or abbreviated form (for example, ‘january’ or ‘jan’) as some users may enter months in this way.
• ensure each field is clearly labeled ‘Day’, ‘Month’, ‘Year’
• use a hint to show the expected date format, for example, ‘07 11 2022’
• use a "text" vs "numeric" input type.
• limit individual field character length.
• require a four-digit year to avoid potential confusion.

Do not:

• auto-advance focus from one field to the next. This makes it difficult for keyboard-only users to navigate and correct mistakes.
• use placeholder text as it disappears when the user starts typing and may not be accessible to all users.
• use visual separators between fields.
• disable copy and paste.
• use in instances where only part of a date is needed, like a month or a year without a specific day.

Helping users pick a date

Users might need to pick a date from a selection, for example, to book an appointment. To do this, you can present dates in a calendar format using a date picker.

How this component works

The three fields in the date input component are grouped together in a fieldset with a legend that describes them, as shown in the examples on this page. The legend is usually a question, such as 'What is your date of birth?'.

Use the autocomplete attribute on the date input component when you're asking for a date of birth. This allows browsers to autofill the information on a user's behalf if they've entered it previously.

The year input is set to accept only a four-digit number while the month and day inputs can accept up to a two-digit number.

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.