Dates

Follow this pattern when you need to ask users for a date, such as a date of birth or appointment date.

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. For dates users might need to look up, consider providing additional context or a calendar picker.

How it works

Use 3 separate inputs for day, month, and year. This is the most accessible approach and works well across different devices and screen sizes.

Date of birth

<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 3 1990</span>
  <div class="date-input">
    <div class="date-input-item">
      <label class="form-label" for="dob-day">Day</label>
      <input class="form-input form-input-width-2" id="dob-day" type="text"
             inputmode="numeric" maxlength="2" pattern="[0-3]?[0-9]" placeholder="DD">
    </div>
    <div class="date-input-item">
      <label class="form-label" for="dob-month">Month</label>
      <input class="form-input form-input-width-2" id="dob-month" type="text"
             inputmode="numeric" maxlength="2" pattern="[0-1]?[0-9]" placeholder="MM">
    </div>
    <div class="date-input-item">
      <label class="form-label" for="dob-year">Year</label>
      <input class="form-input form-input-width-4" id="dob-year" type="text"
             inputmode="numeric" maxlength="4" pattern="[0-9]{4}" placeholder="YYYY">
    </div>
  </div>
</fieldset>

Memorable date

For dates that users will know from memory, the 3-field approach works best.

Approximate dates

If users might not know the exact date, only ask for the parts they're likely to know.

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

• Use inputmode="numeric" to show the number keyboard on mobile
• Do not use type="number" as it adds unwanted spinner controls
• Wrap fields in a <fieldset> with a <legend>
• Provide clear hint text with an example date format
• Do not auto-advance between fields - this can confuse users

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.