Principality of KaharagiaDesign System

Date Input

Use the date input component to help users enter a memorable date, like their date of birth or passport expiry date.

Default Date Input

The date input uses three separate fields for day, month, and year. This approach works better than native date pickers for memorable dates.

What is your date of birth?For example, 27 3 2007
<fieldset class="form-fieldset">
  <legend class="form-legend">
    What is your date of birth?
    <span class="form-legend-hint">For example, 27 3 2007</span>
  </legend>
  <div class="form-date-group">
    <div class="form-group">
      <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">
    </div>
    <div class="form-group">
      <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">
    </div>
    <div class="form-group">
      <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">
    </div>
  </div>
</fieldset>

With Autocomplete

Use autocomplete attributes for common date fields to help browsers auto-fill the information.

What is your date of birth?For example, 27 3 2007
<input ... autocomplete="bday-day">
<input ... autocomplete="bday-month">
<input ... autocomplete="bday-year">

Error State

Show errors when the date is incomplete or invalid.

What is your date of birth?For example, 27 3 2007Date of birth must include a year
<fieldset class="form-fieldset form-group-error">
  <legend class="form-legend">...</legend>
  <span class="form-error-message">Date of birth must include a year</span>
  <div class="form-date-group">
    <div class="form-group">...</div>
    <div class="form-group">...</div>
    <div class="form-group form-group-error">
      <label class="form-label" for="err-year">Year</label>
      <input class="form-input form-input-width-4" ...>
    </div>
  </div>
</fieldset>

Date Select (Dropdown Variant)

Use dropdown selects when you want to prevent input errors or when the month name aids comprehension. This variant uses select elements for day, month (with full month names), and year.

What is your date of birth?
<fieldset class="form-fieldset">
  <legend class="form-legend">What is your date of birth?</legend>
  <div class="date-select">
    <div class="date-select-field">
      <label class="form-label date-select-label" for="dob-day">Day</label>
      <select class="form-select" id="dob-day" name="dob-day">
        <option value="">DD</option>
        <option value="01">1</option>
        <!-- ... 2-31 -->
      </select>
    </div>
    <div class="date-select-field">
      <label class="form-label date-select-label" for="dob-month">Month</label>
      <select class="form-select" id="dob-month" name="dob-month">
        <option value="">Month</option>
        <option value="01">January</option>
        <option value="02">February</option>
        <!-- ... March-December -->
      </select>
    </div>
    <div class="date-select-field">
      <label class="form-label date-select-label" for="dob-year">Year</label>
      <select class="form-select" id="dob-year" name="dob-year">
        <option value="">YYYY</option>
        <option value="2024">2024</option>
        <!-- ... descending years -->
      </select>
    </div>
  </div>
</fieldset>

When to use date select dropdowns

  • When you want to prevent invalid date entries
  • When showing month names aids comprehension
  • For users who may be less familiar with numeric month formats
  • When you have a constrained range of valid years

When to use text inputs instead

  • For memorable dates users know by heart (faster to type)
  • When autocomplete can help (browser remembers birthdates)
  • When the year range is very large (scrolling through years is tedious)

When to Use Date Input

Use date input for:

  • Memorable dates (date of birth, wedding anniversary)
  • Dates that users will know from memory
  • Historical dates in the past

Don't use date input for:

  • Dates that users need to look up (appointment dates)
  • Dates in the near future (use a calendar picker)
  • When you need a relative date ("in the next 3 months")

Usage Guidelines

Do

  • Use inputmode="numeric" to show a numeric keyboard on mobile (for text inputs)
  • Set appropriate maxlength for each field (for text inputs)
  • Provide an example in the hint text
  • Accept both single and double digits (3 or 03 for March)

Don't

  • Don't use type="date" for memorable dates
  • Don't auto-advance focus between fields

Accessibility

  • Use a fieldset to group the three inputs together
  • The legend describes the overall question
  • Each input has its own label
  • Error messages identify which field has the problem
  • Use inputmode="numeric" for appropriate mobile keyboards

CSS Classes

/* Date group container (text inputs) */
.form-date-group { }

/* Fieldset and legend */
.form-fieldset { }
.form-legend { }
.form-legend-hint { }

/* Individual inputs */
.form-input-width-2 { }  /* Day: 4.5rem */
.form-input-width-4 { }  /* Year: 7rem */

/* Date select (dropdowns) */
.date-select { }
.date-select-field { }
.date-select-label { }

/* Error state */
.form-group-error { }
.form-error-message { }