A digital services project by FlexionTime Picker
formUSWDS-derivedinteractive
A combo box variant for time selection with configurable time range and step interval.
Reference: USWDS documentation ↗
Variants
Default Time Picker
- 12:00 am
- 12:30 am
- 1:00 am
- 1:30 am
- 2:00 am
- 2:30 am
- 3:00 am
- 3:30 am
- 4:00 am
- 4:30 am
- 5:00 am
- 5:30 am
- 6:00 am
- 6:30 am
- 7:00 am
- 7:30 am
- 8:00 am
- 8:30 am
- 9:00 am
- 9:30 am
- 10:00 am
- 10:30 am
- 11:00 am
- 11:30 am
- 12:00 pm
- 12:30 pm
- 1:00 pm
- 1:30 pm
- 2:00 pm
- 2:30 pm
- 3:00 pm
- 3:30 pm
- 4:00 pm
- 4:30 pm
- 5:00 pm
- 5:30 pm
- 6:00 pm
- 6:30 pm
- 7:00 pm
- 7:30 pm
- 8:00 pm
- 8:30 pm
- 9:00 pm
- 9:30 pm
- 10:00 pm
- 10:30 pm
- 11:00 pm
- 11:30 pm
<flex-time-picker data-min-time="00:00" data-max-time="23:59" data-step="30">
<label class="flex-label" for="time">Appointment time</label>
<flex-combo-box>
<div class="flex-combo-box__wrapper">
<input class="flex-combo-box__input" id="time" name="time" type="text" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-controls="time-list" autocomplete="off"/>
<button type="button" class="flex-combo-box__toggle" tabindex="-1" aria-label="Toggle options">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#expand_more">
</use>
</svg>
</button>
<button type="button" class="flex-combo-box__clear" tabindex="-1" aria-label="Clear selection" hidden="">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#close">
</use>
</svg>
</button>
<ul class="flex-combo-box__list" id="time-list" role="listbox" hidden="">
<li class="flex-combo-box__option" tabindex="-1" data-value="00:00" id="time-opt-0000">12:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="00:30" id="time-opt-0030">12:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="01:00" id="time-opt-0100">1:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="01:30" id="time-opt-0130">1:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="02:00" id="time-opt-0200">2:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="02:30" id="time-opt-0230">2:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="03:00" id="time-opt-0300">3:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="03:30" id="time-opt-0330">3:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="04:00" id="time-opt-0400">4:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="04:30" id="time-opt-0430">4:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="05:00" id="time-opt-0500">5:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="05:30" id="time-opt-0530">5:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="06:00" id="time-opt-0600">6:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="06:30" id="time-opt-0630">6:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="07:00" id="time-opt-0700">7:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="07:30" id="time-opt-0730">7:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="08:00" id="time-opt-0800">8:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="08:30" id="time-opt-0830">8:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="09:00" id="time-opt-0900">9:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="09:30" id="time-opt-0930">9:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="10:00" id="time-opt-1000">10:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="10:30" id="time-opt-1030">10:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="11:00" id="time-opt-1100">11:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="11:30" id="time-opt-1130">11:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="12:00" id="time-opt-1200">12:00 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="12:30" id="time-opt-1230">12:30 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="13:00" id="time-opt-1300">1:00 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="13:30" id="time-opt-1330">1:30 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="14:00" id="time-opt-1400">2:00 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="14:30" id="time-opt-1430">2:30 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="15:00" id="time-opt-1500">3:00 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="15:30" id="time-opt-1530">3:30 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="16:00" id="time-opt-1600">4:00 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="16:30" id="time-opt-1630">4:30 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="17:00" id="time-opt-1700">5:00 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="17:30" id="time-opt-1730">5:30 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="18:00" id="time-opt-1800">6:00 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="18:30" id="time-opt-1830">6:30 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="19:00" id="time-opt-1900">7:00 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="19:30" id="time-opt-1930">7:30 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="20:00" id="time-opt-2000">8:00 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="20:30" id="time-opt-2030">8:30 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="21:00" id="time-opt-2100">9:00 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="21:30" id="time-opt-2130">9:30 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="22:00" id="time-opt-2200">10:00 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="22:30" id="time-opt-2230">10:30 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="23:00" id="time-opt-2300">11:00 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="23:30" id="time-opt-2330">11:30 pm</li>
</ul>
</div>
</flex-combo-box>
</flex-time-picker>Time Picker Business Hours
- 9:00 am
- 9:30 am
- 10:00 am
- 10:30 am
- 11:00 am
- 11:30 am
- 12:00 pm
- 12:30 pm
- 1:00 pm
- 1:30 pm
- 2:00 pm
- 2:30 pm
- 3:00 pm
- 3:30 pm
- 4:00 pm
- 4:30 pm
- 5:00 pm
<flex-time-picker data-min-time="09:00" data-max-time="17:00" data-step="30">
<label class="flex-label" for="meeting">Meeting time</label>
<flex-combo-box>
<div class="flex-combo-box__wrapper">
<input class="flex-combo-box__input" id="meeting" name="meeting" type="text" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-controls="meeting-list" autocomplete="off"/>
<button type="button" class="flex-combo-box__toggle" tabindex="-1" aria-label="Toggle options">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#expand_more">
</use>
</svg>
</button>
<button type="button" class="flex-combo-box__clear" tabindex="-1" aria-label="Clear selection" hidden="">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#close">
</use>
</svg>
</button>
<ul class="flex-combo-box__list" id="meeting-list" role="listbox" hidden="">
<li class="flex-combo-box__option" tabindex="-1" data-value="09:00" id="meeting-opt-0900">9:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="09:30" id="meeting-opt-0930">9:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="10:00" id="meeting-opt-1000">10:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="10:30" id="meeting-opt-1030">10:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="11:00" id="meeting-opt-1100">11:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="11:30" id="meeting-opt-1130">11:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="12:00" id="meeting-opt-1200">12:00 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="12:30" id="meeting-opt-1230">12:30 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="13:00" id="meeting-opt-1300">1:00 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="13:30" id="meeting-opt-1330">1:30 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="14:00" id="meeting-opt-1400">2:00 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="14:30" id="meeting-opt-1430">2:30 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="15:00" id="meeting-opt-1500">3:00 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="15:30" id="meeting-opt-1530">3:30 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="16:00" id="meeting-opt-1600">4:00 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="16:30" id="meeting-opt-1630">4:30 pm</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="17:00" id="meeting-opt-1700">5:00 pm</li>
</ul>
</div>
</flex-combo-box>
</flex-time-picker>Time Picker Fine Grained
- 6:00 am
- 6:15 am
- 6:30 am
- 6:45 am
- 7:00 am
- 7:15 am
- 7:30 am
- 7:45 am
- 8:00 am
- 8:15 am
- 8:30 am
- 8:45 am
- 9:00 am
- 9:15 am
- 9:30 am
- 9:45 am
- 10:00 am
<flex-time-picker data-min-time="06:00" data-max-time="10:00" data-step="15">
<label class="flex-label" for="alarm">Alarm time</label>
<flex-combo-box>
<div class="flex-combo-box__wrapper">
<input class="flex-combo-box__input" id="alarm" name="alarm" type="text" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-controls="alarm-list" autocomplete="off"/>
<button type="button" class="flex-combo-box__toggle" tabindex="-1" aria-label="Toggle options">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#expand_more">
</use>
</svg>
</button>
<button type="button" class="flex-combo-box__clear" tabindex="-1" aria-label="Clear selection" hidden="">
<svg class="flex-icon" aria-hidden="true" focusable="false">
<use href="/static/sprite.svg#close">
</use>
</svg>
</button>
<ul class="flex-combo-box__list" id="alarm-list" role="listbox" hidden="">
<li class="flex-combo-box__option" tabindex="-1" data-value="06:00" id="alarm-opt-0600">6:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="06:15" id="alarm-opt-0615">6:15 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="06:30" id="alarm-opt-0630">6:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="06:45" id="alarm-opt-0645">6:45 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="07:00" id="alarm-opt-0700">7:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="07:15" id="alarm-opt-0715">7:15 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="07:30" id="alarm-opt-0730">7:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="07:45" id="alarm-opt-0745">7:45 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="08:00" id="alarm-opt-0800">8:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="08:15" id="alarm-opt-0815">8:15 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="08:30" id="alarm-opt-0830">8:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="08:45" id="alarm-opt-0845">8:45 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="09:00" id="alarm-opt-0900">9:00 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="09:15" id="alarm-opt-0915">9:15 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="09:30" id="alarm-opt-0930">9:30 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="09:45" id="alarm-opt-0945">9:45 am</li>
<li class="flex-combo-box__option" tabindex="-1" data-value="10:00" id="alarm-opt-1000">10:00 am</li>
</ul>
</div>
</flex-combo-box>
</flex-time-picker>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-time-picker | <flex-time-picker> (custom element) | Container element with time-specific attributes |
usa-combo-box (inner) | <flex-combo-box> (inner custom element) | Reuses combo box for typeahead/selection behavior |
Verified properties
font-familyfont-sizeline-heightcolorbackground-colorIntentional differences
padding-right: ours = 4.5rem (space for toggle + clear buttons), USWDS = 2.5rem (USWDS uses different button layout)
Inherits from flex-combo-box layout
Behavior promises
- ✓ Generates time options from min/max/step
- ✓ Time options display in 12-hour format with am/pm
- ✓ Reuses combo box for filtering and selection
- ✓ Default step is 30 minutes
- ✓ Custom step interval generates correct options
- ✓ Accessibility audit passes
Source CSS
/* flex-time-picker -- USWDS Time Picker conformance
Extends: flex-combo-box
Features: time selection via combo box with pre-populated time options */
flex-time-picker {
display: block;
/* stylelint-disable-next-line declaration-property-value-allowed-list -- Time-list column intrinsic width. */
max-inline-size: 10rem;
}