Time Pickers
Time pickers collect an hour and a minute, sometimes a second, sometimes a pair of them marking a span. The shape varies more than it does for most inputs: wheels that scroll, steppers that click up and down, a ruler you drag, or rows of From and To chips covering a week of availability. Five blocks cover that spread, from a reminder card that switches on and takes a note to a booking flow putting a week of dates above the wheels.
The decision that matters is granularity, and most products set it too fine. Offering every minute means scrolling past dozens of values nobody wanted in order to reach the quarter hour they did; picking a step and holding to it makes the control shorter and the stored data cleaner. The second decision is the one people skip. A time with no stated zone is read as local by whoever picks it, stored as something else, and discovered on the day a booking lands an hour out.
Date & time wheels
Best for
Booking a slot in one card: a week of dates, then hour and minute wheels
Anatomy
Pick a date head · month button · seven dates with a line indicator · Pick a time head · Hour and Min wheels with edge fade · Back and the round next button
Pick a date
Choose the day for your session.
Pick a time
Scroll the wheels to the start time.
Date & time ruler
Best for
The same booking flow with a glanceable time: the picked day named, the minute read out over a ruler
Anatomy
Pick a date head · month button · date pills, the picked one ringed with its weekday · Pick a time head · 24px time read-out · minute ruler with the brand orb · Back and next
Pick a date
Choose the day for your session.
Pick a time
Slide the ruler to the minute.
12:30 PM
Alarm time picker
Best for
A reminder setting that turns on, takes a note and picks a number of minutes
Anatomy
Card head with title, sub-label, badge and Switch · note field · Set Alarm select · minute wheel card with stepper bubble · Cancel / Reset / Save
Get a heads-up before the Friday standup.
Range time picker
Best for
Availability windows, quiet hours, opening times: several From / To spans per day
Anatomy
Card head with Switch · From / To chips with a remove button per row · error hint at the limit · Add New Range, dark while empty
The hours you can be booked for on Fridays.
Pop-over time picker
Best for
Durations and countdowns set in place: a compact trigger that opens hour, minute and second steppers
Anatomy
Alarm trigger showing 00 : 00 : 00 · tailed pop-over · Hours / Minutes / Seconds columns with up and down · Cancel / Reset / Save
Using Time Pickers
Reach for it when
- Booking a slot, where the time is picked from what is offered rather than typed
- Opening hours and availability, with several From and To spans per day
- An alarm or a reminder measured in minutes
- A countdown or a duration composed from hours, minutes and seconds
Reach for something else when
- A timestamp the reader already knows and can type faster than they can scroll: a masked text field with a forgiving parser is quicker
- A duration that is really one choice from a short list of usual lengths; a select naming them beats three columns of digits
- When the moment matters more than the clock reading, as in 'now' or 'when the job finishes', offer the relative option instead of making someone compute a wall-clock time
Where it shows up
Booking a slot
One card holding a week of dates above the hour and minute wheels. The wheels scroll, drag and take the arrow keys, the edges fade so the reader sees there is more, and the next button waits for both halves.
Quiet hours
Notification settings that silence a window of the day. Each row is a From and a To chip with its own remove button, Add New Range appends another, and an error hint explains the control once the limit is reached.
Alarms and reminders
A settings card that turns the whole thing on before asking for anything else. A switch in the header, a note field for what the reminder says, then a minute wheel with a stepper bubble and Cancel, Reset and Save.
Countdowns and durations
A compact trigger reading zeros until it is opened, then hours, minutes and seconds in three stepper columns. It suits a timer set in place, where the reader is composing a length rather than finding a moment on a clock.
Questions
Should a time picker use a 12-hour or a 24-hour clock?
Follow the reader's locale rather than choosing for them, and parse both on typed input whichever you display. If you must settle on one, the 24-hour clock removes the morning-or-evening ambiguity behind the classic booking error, at the cost of reading as foreign to people who never use it. Never show a bare hour with no period indicator at all.
What timezone does a picked time belong to?
Whatever you decide, put it on screen next to the field. A time picked without a stated zone is read as local by the person picking it and stored as something else often enough to break real bookings. Store an absolute instant rather than a wall-clock string, and remember that on daylight-saving days some local times happen twice and others never happen.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPTime Pickers
Time pickers collect an hour and a minute, sometimes a second, sometimes a pair of them marking a span. The shape varies more than it does for most inputs: wheels that scroll, steppers that click up and down, a ruler you drag, or rows of From and To chips covering a week of availability. Five blocks cover that spread, from a reminder card that switches on and takes a note to a booking flow putting a week of dates above the wheels.
The decision that matters is granularity, and most products set it too fine. Offering every minute means scrolling past dozens of values nobody wanted in order to reach the quarter hour they did; picking a step and holding to it makes the control shorter and the stored data cleaner. The second decision is the one people skip. A time with no stated zone is read as local by whoever picks it, stored as something else, and discovered on the day a booking lands an hour out.
Date & time wheels
Best for
Booking a slot in one card: a week of dates, then hour and minute wheels
Anatomy
Pick a date head · month button · seven dates with a line indicator · Pick a time head · Hour and Min wheels with edge fade · Back and the round next button
Pick a date
Choose the day for your session.
Pick a time
Scroll the wheels to the start time.
Date & time ruler
Best for
The same booking flow with a glanceable time: the picked day named, the minute read out over a ruler
Anatomy
Pick a date head · month button · date pills, the picked one ringed with its weekday · Pick a time head · 24px time read-out · minute ruler with the brand orb · Back and next
Pick a date
Choose the day for your session.
Pick a time
Slide the ruler to the minute.
12:30 PM
Alarm time picker
Best for
A reminder setting that turns on, takes a note and picks a number of minutes
Anatomy
Card head with title, sub-label, badge and Switch · note field · Set Alarm select · minute wheel card with stepper bubble · Cancel / Reset / Save
Get a heads-up before the Friday standup.
Range time picker
Best for
Availability windows, quiet hours, opening times: several From / To spans per day
Anatomy
Card head with Switch · From / To chips with a remove button per row · error hint at the limit · Add New Range, dark while empty
The hours you can be booked for on Fridays.
Pop-over time picker
Best for
Durations and countdowns set in place: a compact trigger that opens hour, minute and second steppers
Anatomy
Alarm trigger showing 00 : 00 : 00 · tailed pop-over · Hours / Minutes / Seconds columns with up and down · Cancel / Reset / Save
Using Time Pickers
Reach for it when
- Booking a slot, where the time is picked from what is offered rather than typed
- Opening hours and availability, with several From and To spans per day
- An alarm or a reminder measured in minutes
- A countdown or a duration composed from hours, minutes and seconds
Reach for something else when
- A timestamp the reader already knows and can type faster than they can scroll: a masked text field with a forgiving parser is quicker
- A duration that is really one choice from a short list of usual lengths; a select naming them beats three columns of digits
- When the moment matters more than the clock reading, as in 'now' or 'when the job finishes', offer the relative option instead of making someone compute a wall-clock time
Where it shows up
Booking a slot
One card holding a week of dates above the hour and minute wheels. The wheels scroll, drag and take the arrow keys, the edges fade so the reader sees there is more, and the next button waits for both halves.
Quiet hours
Notification settings that silence a window of the day. Each row is a From and a To chip with its own remove button, Add New Range appends another, and an error hint explains the control once the limit is reached.
Alarms and reminders
A settings card that turns the whole thing on before asking for anything else. A switch in the header, a note field for what the reminder says, then a minute wheel with a stepper bubble and Cancel, Reset and Save.
Countdowns and durations
A compact trigger reading zeros until it is opened, then hours, minutes and seconds in three stepper columns. It suits a timer set in place, where the reader is composing a length rather than finding a moment on a clock.
Questions
Should a time picker use a 12-hour or a 24-hour clock?
Follow the reader's locale rather than choosing for them, and parse both on typed input whichever you display. If you must settle on one, the 24-hour clock removes the morning-or-evening ambiguity behind the classic booking error, at the cost of reading as foreign to people who never use it. Never show a bare hour with no period indicator at all.
What timezone does a picked time belong to?
Whatever you decide, put it on screen next to the field. A time picked without a stated zone is read as local by the person picking it and stored as something else often enough to break real bookings. Store an absolute instant rather than a wall-clock string, and remember that on daylight-saving days some local times happen twice and others never happen.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
