Time picker UX patterns
Three battle-tested patterns for selecting time in web apps — from native inputs to custom spinners and drag-to-set dials.
Pattern 1 — Native input[type=time]
Zero JS, fully accessible, OS-native picker on mobile. Best for simple scheduling forms where you trust the browser chrome.
Pattern 2 — Hour / minute spinners
Two-column stepper with ± buttons. Great for precision entry on desktop where keyboard up/down arrows feel natural.
14hr
:30min
Pattern 3 — Drag-to-set dial
Circular clock-face metaphor. Tap or drag the hand to set time. Highest delight, highest implementation cost.
14:30