Date input

Three text fields are the easiest way for users to enter most dates.

Date of birth For example: 4 28 1986
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form class="usa-form">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend">Date of birth</legend>
    <span class="usa-hint" id="dobHint">For example: 4 28 1986</span>
    <div class="usa-memorable-date">
      <div class="usa-form-group usa-form-group--month">
        <label class="usa-label" for="date_of_birth_1">Month</label>
        <input class="usa-input usa-input--inline" aria-describedby="dobHint" id="date_of_birth_1" name="date_of_birth_1" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric" value="">
      </div>
      <div class="usa-form-group usa-form-group--day">
        <label class="usa-label" for="date_of_birth_2">Day</label>
        <input class="usa-input usa-input--inline" aria-describedby="dobHint" id="date_of_birth_2" name="date_of_birth_2" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric" value="">
      </div>
      <div class="usa-form-group usa-form-group--year">
        <label class="usa-label" for="date_of_birth_3">Year</label>
        <input class="usa-input usa-input--inline" aria-describedby="dobHint" id="date_of_birth_3" name="date_of_birth_3" type="text" minlength="4" maxlength="4" pattern="[0-9]*" inputmode="numeric" value="">
      </div>
    </div>
  </fieldset>
</form>

When to use the date input component

  • Appropriate for most dates. Use this format for most dates, particularly memorized dates.

When to consider something else

  • Consider a calendar picker for scheduling. If users are trying to schedule something, a calendar picker might make more sense. Be sure to also provide an option for text entry as well.

Usability guidelines

  • Label each field. Be sure each field is properly labeled — some countries enter dates in day, month, year order.
  • Avoid dropdowns. It may be tempting to switch all or some of these text fields to dropdowns, but these tend to be more difficult to use than text boxes.

Accessibility

Implementation

  • The year input is set to accept only a four-digit number while the month and day inputs can accept up to a two-digit number.
  • Always use back-end validation on dates for correctness.
Date input settings

This component has no settings.

Date input variants

This component has no variants.

Package information

  • Package usage: @import form-controls
  • Requires: required, global