Time Picker
An hour/minute/second wheel-based clock, composed on top of Wheel Picker, with a Popover-on-desktop and Drawer-on-mobile trigger for use inside a form field. To pick a date and time together, see Date Picker's With Time example.
Last updated August 12, 2026
Copied from shadcn/ui.
- Not a shadcn/ui component — shadcn's own Time Picker guide uses a native <input type="time"> in a popover; this is an original composition of this registry's own Wheel Picker, Popover, and Drawer instead, following the same Popover-on-desktop/Drawer-on-mobile pattern as Responsive Dialog and Responsive Menu
- Time-of-day is represented as a plain { hour, minute, second? } object rather than a Date, so it never needs a calendar date and stays free of SSR/hydration timing issues
Overview
Installation
$ npx shadcn@latest add https://ui.persian-labs.ir/r/time-picker.jsonUsage
import { TimePicker } from "@/components/ui/time-picker"
export function Example() {
return <TimePicker defaultValue={{ hour: 9, minute: 30 }} />
}Examples
Seconds
Set showSeconds to add a third wheel column.
12-Hour Format
Set hourFormat="12" to format the hour wheel 1-12 and add an AM/PM wheel.
Popover
A wheel-based alternative to shadcn's native <input type="time"> popover pattern.
Responsive
ResponsiveTimePicker renders a Popover on desktop and a Drawer on mobile from one shared API. Resize the viewport (or use your browser devtools' device toolbar) below md to see the trigger switch from opening a popover to opening a bottom drawer.
Range
Two Time Pickers for a business-hours style range, with the from-time capped so it can't exceed the to-time.
RTL
Persian labels and AM/PM abbreviations (ق.ظ / ب.ظ) work naturally in RTL layouts.