Dates

Follow this pattern when you need to ask users for a date, such as a date of birth, appointment date, or arrival date. The Kaharagia standard uses three centered boxes (DD / MM / YYYY) with visible separators, auto-advance on entry, and value clamping — matching the pattern used across all government services including the ePortal travel registration.

When to use this pattern

Use the date input pattern when you need to ask users for a specific date they'll know — like their date of birth or arrival date. For dates within a small known range (booking a slot in the next 4 weeks, for example), consider a calendar picker instead.

How it works

• Three text fields: Day (2 digits), Month (2 digits), Year (4 digits)
• Visible “/” separators so the field reads as a date at a glance
• Centered text and placeholders (DD, MM, YYYY)
• Value clamping: typing “39” in Day produces “31”; typing “15” in Month produces “12”
• Auto-advance: focus jumps to the next box once 2 valid digits are typed
• inputmode="numeric" opens the number keypad on mobile
• autocomplete="bday-*" tokens enable browser autofill for dates of birth

Date of birth

import { DateInputDemo } from '@/components/DateInputDemo';

<fieldset class="form-group">
  <legend class="form-label form-label-lg">What is your date of birth?</legend>
  <span class="form-hint">For example, 27 / 03 / 1990</span>
  <DateInputDemo id="dob" bdayAutocomplete />
</fieldset>

Memorable date

For dates users will know from memory but that aren't a birthday (so we omit the bday-* autocomplete tokens):

<fieldset class="form-group">
  <legend class="form-label form-label-lg">When did you arrive in Kaharagia?</legend>
  <span class="form-hint">For example, 15 / 06 / 2020</span>
  <DateInputDemo id="arrival" />
</fieldset>

Approximate dates (Month / Year only)

If users might not know the exact day, only ask for the parts they're likely to know. Use plain inputs with the matching widths and maxLengths.

<div class="date-input-row">
  <input class="date-input-box date-input-box-2" id="job-month" name="job-month"
         type="text" inputmode="numeric" maxlength="2" placeholder="MM" aria-label="Month">
  <span aria-hidden="true" class="date-input-sep">/</span>
  <input class="date-input-box date-input-box-4" id="job-year" name="job-year"
         type="text" inputmode="numeric" maxlength="4" placeholder="YYYY" aria-label="Year">
</div>

Error messages

Show specific error messages for date validation issues:

If date is empty

"Enter your date of birth"

If day is missing

"Date of birth must include a day"

If month is missing

"Date of birth must include a month"

If year is missing

"Date of birth must include a year"

If date is invalid

"Enter a real date of birth"

If date is in the future (for DOB)

"Date of birth must be in the past"

Accessibility

• inputmode="numeric" shows the number keyboard on mobile (do not use type="number" — it adds unwanted spinner controls)
• Wrap the three boxes in a <fieldset> with a clear <legend>; each box has its own aria-label for screen readers
• Provide hint text with an example date in the format the service expects
• The auto-advance behaviour only fires after the user has typed valid digits, so screen-reader users tabbing manually are not interrupted
• Use autocomplete="bday-day"/bday-month/bday-year on date-of-birth fields so the browser can autofill

Why not use a date picker?

Date pickers can be difficult to use, especially for dates far in the past like dates of birth. The 3-field approach is more accessible and easier to validate. Consider a date picker only for selecting dates within a small range, such as appointment booking.

Why auto-advance is the Kaharagia default

Earlier government guidance recommended not auto-advancing because mid-typing focus changes could confuse screen-reader users. The Kaharagia DateInputDemoonly advances after a full valid 2-digit value is entered, so tabbing manually still works normally and the user's typing rhythm is never interrupted. Field testing on the ePortal travel registration showed entry time dropped meaningfully without any new accessibility complaints, so auto-advance is now the standard.