Time pickers from the Kombai gallery: a home alarm app's wake-up time, a team's booking page and a grocer's pickup windows.
What is a time picker?
A time picker is a control for setting a time without typing it in a fixed format. It splits the time into hours, minutes and, on a 12-hour clock, AM or PM, or it offers a short list of open times to pick from. Many sit right after a date picker.
- Minutes often move in steps of 5, 15 or 30 instead of one at a time.
- Booking pickers show only the times that are still open.
Time pickers show up across calendar, book a demo and checkout screens.
When to use a time picker
- Any time of dayAlarms, reminders and quiet hours that can fall at any minute.
- Open slotsAppointments and calls where only some times are free.
- Lengths of timeTimers, countdowns and logged sessions in hours and minutes.
When not to use one
- Rough times of dayIf morning or evening is enough, offer those as options.
- Times people type fasterIn desktop forms, a typed field with a short list beats a wheel.
- Exact timestampsTimes with seconds, like in logs, are faster to type or paste.
Anatomy of a time picker
This one works. Tab to the hour or the minutes and press the arrow keys, or click the arrows and the AM and PM buttons.
Pickup at 6:15 PM
- Default
- Focused field
- 24-hour
- Disabled
- LabelNames the time
- Hour1 to 12, wraps around
- MinutesSteps of 5
- AM and PMOnly on a 12-hour clock
- Step buttonsUp and down by one step
- StatesDefault, focus, 24-hour, disabled
Time picker variants
We sorted every time picker design in the Kombai gallery and found six patterns. Browse all 50 web and 30 mobile designs.
1. Wheels
The phone default. Scrolling columns for hour, minute and AM or PM, with the chosen row in a band across the middle.
2. Slot buttons
A grid or a column of open times as buttons, usually beside a calendar, so people only see what they can book.
3. Dropdown lists
A time field that opens a list in 15 or 30 minute steps, common in desktop event and publishing forms.
4. Durations
Hours and minutes wheels with the units written in, for timers, countdowns and logged sessions.
5. Start and end times
Two times joined by a dash, often repeated per weekday, for working hours and availability.
6. Steppers and dials
Big digits with up and down arrows, a clock face to drag a hand around, or a circular dial for a duration.
Where time pickers show up
Appointments and calls
Pick a day, then one of the open times, often with the time zone written beside the slots.
Deliveries and pickups
One or two hour windows instead of exact times, with fees or busy labels on each.
Restaurant tables
Party size, date and time together, with the nearest open times as chips.
Reminders and quiet hours
A time to start a fast, open a room or stop notifications, set once and repeated.
Time picker vs similar components
Build notes
- For simple forms, use <input type="time">. Its value is always 24-hour HH:mm, whatever the display.
- Set step in seconds to snap minutes to a grid, like step="900" for 15 minutes.
- For custom hour and minute fields, give each role="spinbutton" with aria-valuenow, aria-valuemin and aria-valuemax.
- Up and Down Arrow change a field, Page Up and Page Down take bigger steps, and Home and End jump to the ends.
- Add aria-valuetext when the number alone reads badly, like a period that is AM or PM.
- Label the time zone next to booking slots, and let people change it.
FAQ
Should a time picker use a 12-hour or a 24-hour clock?
Match what people read every day where they live. The native time input picks a format from the browser or the locale, and many booking pages add a 12h and 24h toggle. Store the time in 24-hour form either way.
Wheels, slot buttons or a typed field?
Wheels suit any time of day on a phone, like an alarm. Slot buttons suit bookings, where only some times are open. On desktop forms, a typed field with a list in 15 or 30 minute steps is fastest.
How should a time picker handle time zones?
Show times in the viewer's zone and say which one it is, like "Times in Europe/Lisbon", with a way to change it. Save the time with its zone, so the host and the guest see the same moment.
Should people be able to pick any minute?
Usually not. Snap to the steps the service uses, like 5 minutes for an alarm or 15 for a meeting, so there is less to scroll. In HTML, the step attribute on a time input does this.
Related terms
All glossary terms · Browse 50 web and 30 mobile time picker designs