✨ feat(component): Date of birth field

[Feamusbal]

Summary

We are using different design approaches for asking users for their date of birth. None of them use the best practice.

• In some older applications we are using dropdowns (e.g., car insurance)
  -Dropdown lists are cumbersome to use.
• In some we include three text entry fields (e.g., household insurance)
  -Approach is good, but the design was not made explicitly for this
• In some we use two interaction style, drop down & text field (e.g., Ford standalone solution)
  -Using two interaction style increases users cognitive load and the likelihood of user error

Research from gov.uk has shown that three separate number fields, with text labels assigned is the most usable pattern (easy on mobile and desktop + low error rate).

https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/

Use Case

We need the date of birth field for all calculators. Currently, we are using it e.g., for Bank Now/Ford

Preferred Solution

Show three separate fields:

• Add a hint below showing the right format for the fields
• Do not use auto-tab between the three inputs, research from UK gov showed that users do not expect this behaviour (Date input alphagov/govuk-design-system-backlog#42)
  -We need to support the behavior of the Backspace button across the input
• The width of field should be adjusted to the amount numbers that are needed to be entered and should not be full width

Additional Information

Further usfull information: https://www.smashingmagazine.com/2021/05/frustrating-design-patterns-birthday-picker/

Will this feature introduce breaking changes?

None

Code of Conduct

• I agree to follow this project's Code of Conduct

[hirsch88]

will be done with #695