Date input

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

Date of birth For example: 04 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: 04 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="number" min="1" max="12" 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="number" min="1" max="31" 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="number" min="1900" max="2019" 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

  • Follow input guidance. These text fields should follow the accessibility guidelines for all text inputs.
  • Don’t auto-advance focus. Do not use JavaScript to auto advance the focus from one field to the next. This makes it difficult for keyboard-only users to navigate and correct mistakes.

Implementation

  • Currently, the max limit for the year input is set to 2000, but it should be changed depending on the context of the form.

Package information

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