Skip to main contentSkip to site searchSkip to component search
Honeycomb

Time Input

This component lets the user select time from pre-determined options.

This component is intended to be used when the user can choose from a limited set of time options, if your use case allows for an arbitrary time choice you should use an input with type="time" instead.

There are several options of the time input, depending on how precisely you need the time selection to be. Those are implemented by changing the number of flix-time-input__select elements inside. It's possible to have up to 3 of them if you need to select hours, minutes in 24 or 12 hour format.

If you need to show more information, add them to the flix-time-input__info, add an id to it and connect it to the select element using aria-describedby.

Additional info feedback element 
<div class="flix-time-input">
  <label class="flix-time-input__label flix-label" for="time-input-12">Time (12Hr only)</label>
  <div class="flix-time-input__select">
    <select id="time-input-12" class="flix-time-input__field" aria-describedby="time-input-12-info">
      <option value="1">0:00 AM</option>
      <option value="4">4:00 AM</option>
      <option value="8">8:00 AM</option>
      <option value="12">12:00 PM</option>
      <option value="16">4:00 PM</option>
      <option value="20">8:00 PM</option>
    </select>
  </div>
  <span class="flix-time-input__info" id="time-input-12-info">Additional info feedback element</span>
</div>

Handling errors

To correctly implement the error state you must do the following:

  • Add aria-invalid="true" to the select element to mark it as invalid;
  • If the input is required, make sure to add the required attribute;
  • If an error message is needed, the first flix-time-input__info should be used for it:
    • Add an id to the error message element and set aria-live="assertive", this will inform assistive technologies as soon as the error happens;
    • Connect the error message with the invalid select using aria-errormessage.
  • Finally, add flix-time-input--error to the component to trigger the visual appearance.
This field is required! Additional info feedback element 
<div class="flix-time-input flix-time-input--error">
  <label class="flix-time-input__label flix-label" for="time-input-12-error">Time (12Hr with error)</label>
  <div class="flix-time-input__select">
    <select id="time-input-12-error" class="flix-time-input__field" aria-invalid="true" aria-errormessage="time-input-12-error-message" aria-describedby="time-input-12-error-info" required="">
      <option value="0:00">0:00 AM</option>
      <option value="4:00">4:00 AM</option>
      <option value="8:00">8:00 AM</option>
      <option value="12:00">12:00 PM</option>
      <option value="16:00">4:00 PM</option>
      <option value="20:00">8:00 PM</option>
    </select>
  </div>
  <span class="flix-time-input__info" id="time-input-12-error-message" aria-live="assertive">This field is required!</span>
  <span class="flix-time-input__info" id="time-input-12-error-info">Additional info feedback element</span>
</div>

Disabled State

To make a time input disabled you must do the following:

  • Add flix-time-input--disabled to the component to trigger the disabled appearance;
  • Add disabled attribute to each select element to truly disable the
<div class="flix-time-input flix-time-input--disabled">
  <label class="flix-time-input__label flix-label" for="time-input-12-disabled">Time (12Hr disabled)</label>
  <div class="flix-time-input__select">
    <select id="time-input-12-disabled" class="flix-time-input__field" disabled="">
      <option value="0:00">0:00 AM</option>
      <option value="4:00">4:00 AM</option>
      <option value="8:00">8:00 AM</option>
      <option value="12:00">12:00 PM</option>
      <option value="16:00">4:00 PM</option>
      <option value="20:00">8:00 PM</option>
    </select>
  </div>
</div>

Multiple selects with fieldset

When you need multiple selects (for separate hours, minutes and so on), you must wrap them in a fieldset. In this case the label becomes a legend element for all selects that are wrapped together. Then you must add a meaningful aria-label to identify each select.

Again, if more information is needed, add it to the flix-time-input__info with an id then connect the message to each of the select elements using aria-describedby.

Handling errors is the same as previously explained, add all of the aria attributes correctly and then enable the appearance by adding the class modifier.

Time (24 Hr:Min)
Additional information here
Time (12 Hr:Min) 
<fieldset class="flix-time-input">
  <legend class="flix-time-input__label flix-label">Time (24 Hr:Min)</legend>
  <div class="flix-time-input__select">
    <select aria-label="Hours" class="flix-time-input__field" aria-describedby="time-24-info">
      <option value="0">00</option>
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
    </select>
  </div>
  <div class="flix-time-input__select">
    <select aria-label="Minutes" class="flix-time-input__field" aria-describedby="time-24-info">
      <option value="00">00</option>
      <option value="15">15</option>
      <option value="30">30</option>
      <option value="45">45</option>
    </select>
  </div>
  <span class="flix-time-input__info" id="time-24-info">Additional information here</span>
</fieldset>

<fieldset class="flix-time-input flix-time-input--error">
  <legend class="flix-time-input__label flix-label">Time (12 Hr:Min)</legend>
  <div class="flix-time-input__select">
    <select aria-label="Hours" class="flix-time-input__field" aria-invalid="true" required="">
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </select>
  </div>
  <div class="flix-time-input__select">
    <select aria-label="Minutes" class="flix-time-input__field" aria-invalid="true" required="">
      <option value="00">00</option>
      <option value="15">15</option>
      <option value="30">30</option>
      <option value="45">45</option>
    </select>
  </div>
  <div class="flix-time-input__select">
    <select aria-label="Change to AM/PM" class="flix-time-input__field" aria-invalid="true" required="">
      <option value="AM">AM</option>
      <option value="PM">PM</option>
    </select>
  </div>
</fieldset>
Made with 🍯 by FlixMobility 2023