14.07 / Calendar

Time picker — drop-off & pickup

Scrollable hour and minute columns with a 12h/24h toggle. Arrow keys walk options inside each column; Enter selects.

Production answer

Time picker — drop-off & pickup is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Time picker — drop-off & pickup states
Generative search brief

Time picker — drop-off & pickup: Scrollable hour and minute columns with a 12h/24h toggle. Arrow keys walk options inside each column; Enter selects.

Drop-off time
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
  • 05
  • 10
  • 15
  • 20
  • 25
  • 30
  • 35
  • 40
  • 45
  • 50
  • 55
Pickup time
Hour
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
:
Min
  • 00
  • 15
  • 30
  • 45
Behaviour

The 24h display renders zero-padded hours (00–23). The 12h display renders 1–12 with explicit AM/PM chips so it can express both 12:00 AM and 12:00 PM without ambiguity. Hour selection in 12h mode preserves the current half-of-day; flipping AM/PM is a separate action.