Skip to main content

Time

Information: Documentation incomplete

This component still requires documentation.

Use the time component allows users to enter a time in HH:MM format.

Example

Default

Open example in a new window
View HTML 
<fieldset class="uhb-c-fieldset">
  <legend class="uhb-c-fieldset__legend">
    Please enter the time of your appointment  
  </legend>
  <div class="uhb-c-time">
    <div class="uhb-c-time__item">
      <label class="uhb-c-time__label uhb-c-label" for="appointment-hour">
        Hour (HH)
      </label>
      <input class="uhb-c-time__input uhb-c-input" id="appointment-hour" name="appointment-hour" placeholder="HH" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric">
    </div>
    <div class="uhb-c-time__item">
      <label class="uhb-c-time__label uhb-c-label" for="appointment-minute">
        Minute (MM)
      </label>
      <input class="uhb-c-time__input uhb-c-input" id="appointment-minute" name="appointment-minute" placeholder="MM" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric">
    </div>
  </div>
</fieldset>