Ask for a date of birth

Three fields: day, month, year. No picker.

Why

People know their date of birth. A calendar makes them scroll back decades.
Calendar widgets fail on low-end Android browsers and are slow with screen readers.
Three numeric fields open the number keyboard on phones and need no script.

GOV.UK reached the same conclusion from its own research, and this follows their pattern.

The pattern

Date of birth For example, 27 3 1990

Day

Month

Year

Show HTML

<fieldset class="ag-field ag-mb-0" aria-describedby="dob-hint">
  <legend class="ag-legend">Date of birth</legend>
  <span class="ag-hint" id="dob-hint">For example, 27 3 1990</span>
  <div class="ag-date-input">
    <div class="ag-date-input__item">
      <label class="ag-date-input__label" for="dob-day">Day</label>
      <input class="ag-input" id="dob-day" name="dob-day" type="text" inputmode="numeric" autocomplete="bday-day" />
    </div>
    <div class="ag-date-input__item">
      <label class="ag-date-input__label" for="dob-month">Month</label>
      <input
        class="ag-input"
        id="dob-month"
        name="dob-month"
        type="text"
        inputmode="numeric"
        autocomplete="bday-month"
      />
    </div>
    <div class="ag-date-input__item ag-date-input__item--year">
      <label class="ag-date-input__label" for="dob-year">Year</label>
      <input
        class="ag-input"
        id="dob-year"
        name="dob-year"
        type="text"
        inputmode="numeric"
        autocomplete="bday-year"
      />
    </div>
  </div>
</fieldset>

Rules

Use type="text" with inputmode="numeric", not type="number", which has spinner and scroll problems.
Use the bday-* autocomplete values so browsers can fill it.
The hint shows an example in the same order as the fields.
Accept 1 or 01 for day and month. Do not make people type leading zeros.
For other dates, such as a passport expiry, change the legend and the hint and drop the autocomplete.

Errors

Mark the whole fieldset with ag-field--error, put one message above the fields, and link to the first field from the error summary. Say which part is wrong: "Date of birth must include a year".