Back to all examples

Ask a user for a birthday

ReactAngularWeb Components
const [birthdate, setBirthdate] = useState<Date | undefined>(undefined);
<GoabFormItem label="What is your date of birth?">
      <GoabDatePicker
        name="birthdate"
        type="input"
        value={birthdate}
        onChange={(e) => setBirthdate(e.value)}
      />
    </GoabFormItem>

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
  • Users can type the date directly or use the calendar picker

Related examples

Ask a user for an address Forms