Date input

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

Date of birth For example: 4 28 1986
<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 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 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="">

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.



  • 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