Date of birth

Base pattern

This pattern is defined as a ‘memorable date’, of which users will know the answer. Using hint text helps the user to understand the format, while the three separate boxes with Day, Month, Year labels removes ambiguity about which comes first, day or month. They also serve an important part in helping assistive technologies recognise and distinguish all three.

Error states

The error message should always sit above the input field to give context. The error icon helps draw the eye by disrupting the flow of text at the starting point of the sentence, and aids in accessibility for those who may be colour impaired and not see the colour change.

The Date of birth pattern can isolate which field carries the error and highlight accordingly.

If more than one field has an error, the errors stack in a group under the hint text as each input field (Day, Month, Year) is in a group.

User experience

Why not select boxes?

Swiping on mobile through long lists of numbers requires more effort, as does the time it takes on desktop to click, scroll, and select x 3.

The necessity to move between keyboard and mouse rather than continuing with input fields means progress is slowed and more difficult for those with poor motor skills.

The ‘tab to next field’ control is a standard practise for persons with a disability.

Why not one field?

One field can be prone to errors as users need to adhere to a format which usually requires dashes or slashes, and spaces or no spaces, requiring more cognitive effort to complete as the user needs to check and match the system exactly, as well as generating more rules around handling errors.

Why not auto focus on the next field?

This is an accessibility issue as automatically moving the focus from one field to another contradicts assistive technologies which use the tab button to focus on a field, as well as taking away control from user.expiry dates.

Dos and don'ts

• Do ensure field lengths match the expected length of the data to be captured.
• Do not remove the hint text above the field or sub labels as this is important discoverable functionality for usability, assistive technologies, and persons with a disability.