NJ Web Design System (v1.0.0)

Date Input 

<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>

No notes defined.

<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>
 
package:
  name: null
  version: 1.0.0
uswds:
  path: ../../dist