Skip to main content

afrigov is an open-source project. It is not a government website and is not affiliated with any government.

Previewing neutral core Change

afrigov Accessible government design system

Date input

Day, month, year. Three fields, no picker. The full guidance is in the date of birth pattern.

When does your passport expire? For example, 15 8 2031
Show HTML
<fieldset class="ag-field ag-mb-0" aria-describedby="di-hint">
  <legend class="ag-legend">When does your passport expire?</legend>
  <span class="ag-hint" id="di-hint">For example, 15 8 2031</span>
  <div class="ag-date-input">
    <div class="ag-date-input__item">
      <label class="ag-date-input__label" for="di-day">Day</label>
      <input class="ag-input" id="di-day" name="expiry-day" type="text" inputmode="numeric" />
    </div>
    <div class="ag-date-input__item">
      <label class="ag-date-input__label" for="di-month">Month</label>
      <input class="ag-input" id="di-month" name="expiry-month" type="text" inputmode="numeric" />
    </div>
    <div class="ag-date-input__item ag-date-input__item--year">
      <label class="ag-date-input__label" for="di-year">Year</label>
      <input class="ag-input" id="di-year" name="expiry-year" type="text" inputmode="numeric" />
    </div>
  </div>
</fieldset>

Accessibility

  • The question is the legend; each field has its own visible label.
  • The hint gives an example in the same order as the fields.
  • If only month and year matter, such as a card expiry, remove the day field.