Inputs · §5.5

Date of birth

Year, month and day in ISO order with a clear hint.

State
Theme
Contrast
Language
Motion
Text size

Code

<DobInput onValueChange={setDob} t={t} value={dob} />

Accessibility

  • Three labelled numeric fields in a fieldset with a legend.
  • Validated when focus leaves the group, never per keystroke.

Usage

Do

  • Paste a full YYYY-MM-DD into any field.

Don't

  • No date wheels for a date of birth.

Platforms

Web
apps/web/components/edflow/dob-input.tsx
iOS
Three TextFields (.numberPad)
Android
Three OutlinedTextFields (number keyboard)