Skip to main content

Date

Information: Documentation incomplete

This component still requires documentation.

Use the date component to allow users to enter a date in DD/MM/YYYY format.

Example

Default

Open example in a new window
View HTML 
<fieldset class="uhb-c-fieldset">
  <legend class="uhb-c-fieldset__legend">
    Please enter your date of birth  
  </legend>
  <div class="uhb-c-date">
    <div class="uhb-c-date__item">
      <label class="uhb-c-date__label uhb-c-label" for="birth-day">
        Day (DD)
      </label>
      <input class="uhb-c-date__input uhb-c-input" id="birth-day" name="birth-day" placeholder="DD" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric">
    </div>
    <div class="uhb-c-date__item">
      <label class="uhb-c-date__label uhb-c-label" for="birth-month">
        Month (MM)
      </label>
      <input class="uhb-c-date__input uhb-c-input" id="birth-month" name="birth-month" placeholder="MM" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric">
    </div>
    <div class="uhb-c-date__item">
      <label class="uhb-c-date__label uhb-c-label" for="birth-year">
        Year (YYYY)
      </label>
      <input class="uhb-c-date__input uhb-c-input" id="birth-year" name="birth-year" placeholder="YYYY" type="text" maxlength="4" pattern="[0-9]*" inputmode="numeric">
    </div>
  </div>
</fieldset>