Date input

20 months ago by
1. Upload examples of what you've used for your project (and what worked/didn't work)
2. Comment on the patterns that are posted below (and why you think it works, doesn't work)

3 Answers

20 months ago by

Date of birth pattern:

 Solution is:

  • Responsive
  • Accessible

• No confusion around whether day or month comes first, as month is represented by its name (and not number value).
• Can type in year value without having to scroll through a dropdown or click through a calendar.

• Shifting from dropdown to input field (and mouse to keyboard) might be confusing for some users?
• Placeholder text for the year input field that disappears after a user starts to type. Noting Nelson Norman Group: "Placeholder text within a form field makes it difficult for people to remember what information belongs in a field, and to check for and fix errors. It also poses additional burdens for users with visual and cognitive impairments."


- - -


Here's a link to an audit of existing date patterns used through out Westpac and STG:


20 months ago by

Date pattern

Scenarios: credit card expiry, ID expiry date, employment start/end date

A dropdown for day, month and year:


This pattern can be adapted depending on what you're asking for. For example, an expiry date:



This solution is:

  • accessible (can be used with a mouse and keyboard)
  • responsive (works across all breakpoints: LG, MD, SM, XS)

The only time this might not work:

  • Is in a scenario where people are thinking "I want to make the payment next Wednesday" 
  • For date of birth (because of the mega scroll in the year dropdown).

For older people such as Myself - dropdown lists for years really do make me feel how old I am. It reminds me of my mortality. Also would we not consider a calendar or date picker arrangement?

written 20 months ago by Stephen Cox  

Yes, we are definitely open to a calendar. If anyone has an accessible and responsive calendar solution, feel free to share on here!

written 20 months ago by Amritah Pathak  
20 months ago by

Date of birth pattern (alternative option):

Solution is:

  • Responsive
  • Accessible

Has this pattern been tested?
We haven't tested this pattern in context of our banking services, however, have, and it tested well for them. You can read about their insights here.



Please login to add an answer/comment or follow this question.

Similar posts:
Search »