Ask a user for a birthday

The date picker component handles accessibility automatically. Ensure the form-item label clearly describes what date is being requested.

Asks for a user’s birthday using the date picker component.

When to use

Use this pattern when you need to collect a date of birth for:

  • Age verification
  • Identity confirmation
  • Benefits eligibility

Considerations

  • Consider whether you really need exact birthday vs just year or age range
  • The date picker provides a consistent, accessible date selection experience
  • The date picker has two types: input (a month dropdown with day and year fields, used here) and calendar (a popup calendar, for choosing dates near today). A birthday is a date the user already knows, so this example uses the input type
  • Validate that the entered date is in the past. The input type doesn’t enforce min and max, so typing a future year isn’t blocked
View old example docs