Time input

Open this example in a new tab: time-input

Copy code: time-input

<fieldset class="form__fieldset form__group" id="time-input-example-1">  
  <legend class="form__label">Time</legend>  
  <p class="form__hint">Provide an estimated time if not known. For example, 22:00</p>  
  <div class="form__group--inner">  
    <div class="form__date">  
      <label class="form__label form__label--date" for="time-input-example-1-hour">Hours</label>  
      <input class="form__input" id="time-input-example-1-hour" type="number">  
    </div>  
    <div class="form__date">  
      <label class="form__label form__label--date" for="time-input-example-1-minute">Minutes</label>  
      <input class="form__input" id="time-input-example-1-minute" type="number">  
    </div>  
  </div>  
</fieldset>

Open this example in a new tab: time-input

Copy code: time-input

<fieldset class="form__fieldset form__group form__group--error" id="time-input-example-2">  
  <legend class="form__label">Time</legend>  
  <p class="form__hint form__hint--error">Provide an estimated time if not known. For example, 22:00</p>  
  <p class="form__error-message">"Time" is required</p>  
  <div class="form__group--inner">  
    <div class="form__date">  
      <label class="form__label form__label--date" for="time-input-example-2-hour">Hours</label>  
      <input class="form__input form__input--error" id="time-input-example-2-hour" type="number">  
    </div>  
    <div class="form__date">  
      <label class="form__label form__label--date" for="time-input-example-2-minute">Minutes</label>  
      <input class="form__input form__input--error" id="time-input-example-2-minute" type="number">  
    </div>  
  </div>  
</fieldset>