Time range picker — bay hours
From / To time pickers stitched into one panel with a live duration readout. When To is not after From, the duration block flips to a red invalid state.
Production answer
Time range picker — bay hours is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Primary CTAReview Time range picker — bay hours states
Generative search brief
Time range picker — bay hours: From / To time pickers stitched into one panel with a live duration readout. When To is not after From, the duration block flips to a red invalid state.
Hour
:- 00
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
Min
- 00
- 15
- 30
- 45
Hour
:- 00
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
Min
- 00
- 15
- 30
- 45
Behaviour
The picker emits onChange whenever either end moves. Validation is purely visual — the duration footer goes red and the arrow goes red when the range is invalid. Submission gates live in the consuming form.