@uswds/uswds/packages/usa-memorable-date/src/test/template.html

Open source UI components and visual style guide for U.S. government websites

<fieldset class="usa-fieldset">
  <legend class="usa-legend">Date of Birth</legend>
  <span class="usa-hint" aria-hidden="true" id="memorable-date-hint">
    Select a month. Enter 1 or 2 digits for the day and 4 digits for the year.
  </span>
  <div class="usa-memorable-date">
    <div class="usa-form-group usa-form-group--month usa-form-group--select">
      <label class="usa-label" for="memorable-date-month">Month</label>
      <span class="usa-hint usa-sr-only" id="memorable-date-month-hint">Select a month from the dropdown.</span>
      <select class="usa-select" id="memorable-date-month" name="memorable-date-month" aria-describedby="memorable-date-month-hint">
        <option value>- Select -</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
    </div>
    <div class="usa-form-group usa-form-group--day">
      <label class="usa-label" for="memorable-date-day">Day</label>
      <span class="usa-hint usa-sr-only" id="memorable-date-day-hint">Enter 1 or 2 digits for the day.</span>
      <input class="usa-input" aria-describedby="memorable-date-day-hint" id="memorable-date-day" name="memorable-date-day"
        maxlength="2" pattern="[0-9]*" inputmode="numeric" value="" />
    </div>
    <div class="usa-form-group usa-form-group--year">
      <label class="usa-label" for="memorable-date-year">Year</label>
      <span class="usa-hint usa-sr-only" id="memorable-date-year-hint">Enter 4 digits for the year.</span>
      <input class="usa-input" aria-describedby="memorable-date-year-hint" id="memorable-date-year" name="memorable-date-year"
        minlength="4" maxlength="4" pattern="[0-9]*" inputmode="numeric" value="" />
    </div>
  </div>
</fieldset>