Date input

Use the date input component to help people enter a memorable date or one they can easily look up.

Example

Example

Date input

What is your date of birth?

For example 21 12 2020

Date input with error message

What is your date of birth?

For example 21 12 2020

Enter your date of birth

Date input with error message (empty year)

What is your date of birth?

For example 21 12 2020

Enter your year of birth

HTML

                                
<!-- Date input -->
<form id="date-inputs" class="coop-form" novalidate>
  <h3>Date input</h3>

  <div class="coop-form__row">
    <fieldset id="dob-1" aria-describedby="dob-1-hint">
      <legend class="coop-form__label">What is your date of birth?</legend>

      <p id="dob-1-hint" class="coop-form__hint">For example 21 12 2020</p>
      <p id="dob-1-error" class="coop-form__error" hidden></p>

      <div class="coop-form__columns">
        <div class="coop-form__column">
          <label class="coop-form__label" for="dob-1-day">Day</label>
          <input
            id="dob-1-day"
            type="text"
            pattern="[0-9]*"
            inputmode="numeric"
            maxlength="2"
            minlength="2"
            autocomplete="bday-day"
            class="coop-form__field coop-form__input coop-form__input--width-2"
          >
        </div>

        <div class="coop-form__column">
          <label class="coop-form__label" for="dob-1-month">Month</label>
          <input
            id="dob-1-month"
            type="text"
            pattern="[0-9]*"
            inputmode="numeric"
            maxlength="2"
            minlength="2"
            autocomplete="bday-month"
            class="coop-form__field coop-form__input coop-form__input--width-2"
          >
        </div>

        <div class="coop-form__column">
          <label class="coop-form__label" for="dob-1-year">Year</label>
          <input
            id="dob-1-year"
            type="text"
            pattern="[0-9]*"
            inputmode="numeric"
            maxlength="4"
            minlength="4"
            autocomplete="bday-year"
            class="coop-form__field coop-form__input coop-form__input--width-4"
          >
        </div>
      </div>
    </fieldset>
  </div>
</form>

                                
<!-- Date input with error message -->
<form id="date-inputs-error" class="coop-form" novalidate>
  <h3>Date input with error message</h3>

  <div class="coop-form__row">
    <fieldset id="dob-2" aria-describedby="dob-2-hint dob-2-error">
      <legend class="coop-form__label">What is your date of birth?</legend>

      <p id="dob-2-hint" class="coop-form__hint">For example 21 12 2020</p>
      <p id="dob-2-error" class="coop-form__error">Enter your date of birth</p>

      <div class="coop-form__columns">
        <div class="coop-form__column">
          <label class="coop-form__label" for="dob-2-day">Day</label>
          <input
            id="dob-2-day"
            type="text"
            pattern="[0-9]*"
            inputmode="numeric"
            maxlength="2"
            minlength="2"
            autocomplete="bday-day"
            class="coop-form__field coop-form__input coop-form__input--width-2 coop-form__invalid"
          >
        </div>

        <div class="coop-form__column">
          <label class="coop-form__label" for="dob-2-month">Month</label>
          <input
            id="dob-2-month"
            type="text"
            pattern="[0-9]*"
            inputmode="numeric"
            maxlength="2"
            minlength="2"
            autocomplete="bday-month"
            class="coop-form__field coop-form__input coop-form__input--width-2 coop-form__invalid"
          >
        </div>

        <div class="coop-form__column">
          <label class="coop-form__label" for="dob-2-year">Year</label>
          <input
            id="dob-2-year"
            type="text"
            pattern="[0-9]*"
            inputmode="numeric"
            maxlength="4"
            minlength="4"
            autocomplete="bday-year"
            class="coop-form__field coop-form__input coop-form__input--width-4 coop-form__invalid"
          >
        </div>
      </div>
    </fieldset>
  </div>
</form>

                                
<!-- Date input with error message (empty year) -->
<form id="date-inputs-error-year" class="coop-form" novalidate>
  <h3>Date input with error message (empty year)</h3>

  <div class="coop-form__row">
    <fieldset id="dob-3" aria-describedby="dob-3-hint dob-3-error">
      <legend class="coop-form__label">What is your date of birth?</legend>

      <p id="dob-3-hint" class="coop-form__hint">For example 21 12 2020</p>
      <p id="dob-3-error" class="coop-form__error">Enter your year of birth</p>

      <div class="coop-form__columns">
        <div class="coop-form__column">
          <label class="coop-form__label" for="dob-3-day">Day</label>
          <input
            id="dob-3-day"
            type="text"
            pattern="[0-9]*"
            inputmode="numeric"
            maxlength="2"
            minlength="2"
            autocomplete="bday-day"
            class="coop-form__field coop-form__input coop-form__input--width-2"
            value="21"
          >
        </div>

        <div class="coop-form__column">
          <label class="coop-form__label" for="dob-3-month">Month</label>
          <input
            id="dob-3-month"
            type="text"
            pattern="[0-9]*"
            inputmode="numeric"
            maxlength="2"
            minlength="2"
            autocomplete="bday-month"
            class="coop-form__field coop-form__input coop-form__input--width-2"
            value="12"
          >
        </div>

        <div class="coop-form__column">
          <label class="coop-form__label" for="dob-3-year">Year</label>
          <input
            id="dob-3-year"
            type="text"
            pattern="[0-9]*"
            inputmode="numeric"
            maxlength="4"
            minlength="4"
            autocomplete="bday-year"
            class="coop-form__field coop-form__input coop-form__input--width-4 coop-form__invalid"
          >
        </div>
      </div>
    </fieldset>
  </div>
</form>

                                

Design and content

Heading (legend), hint text, form fields and labels should match the foundational design system styles on forms. For all states - such as hover and focus.

The individual form fields should be sized to match the expected input.