--- title: "Time picker UI: anatomy, variants and examples | Kombai" description: "A time picker lets people choose a time of day, a time slot or a length of time, with wheels, buttons or a list." canonical_url: https://kombai.com/glossary/time-picker/ author: "The Kombai Team" --- # Time picker A time picker lets people choose a time of day, a time slot or a length of time, with wheels, buttons or a list. - Also called: time selector - Platforms: Web, Mobile - In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/time-picker/), [30 mobile designs](https://kombai.com/gallery/mobile/time-picker/) - [Halden](https://kombai.com/gallery/inspirations/time-picker-ios-7/) (Mobile) - [Aldergate](https://kombai.com/gallery/inspirations/time-picker-web-34/) (Web) - [Halewell Market](https://kombai.com/gallery/inspirations/time-picker-ios-14/) (Mobile) ## 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. ## When to use time picker - **Any time of day.** Alarms, reminders and quiet hours that can fall at any minute. - **Open slots.** Appointments and calls where only some times are free. - **Lengths of time.** Timers, countdowns and logged sessions in hours and minutes. ## When not to use one - **Rough times of day.** If morning or evening is enough, offer those as options. - **Times people type faster.** In desktop forms, a typed field with a short list beats a wheel. - **Exact timestamps.** Times with seconds, like in logs, are faster to type or paste. ## Anatomy 1. **Label**: Names the time 2. **Hour**: 1 to 12, wraps around 3. **Minutes**: Steps of 5 4. **AM and PM**: Only on a 12-hour clock 5. **Step buttons**: Up and down by one step 6. **States**: Default, focus, 24-hour, disabled ## Variants We sorted every time picker design in the Kombai gallery and found six patterns. ### 1. Wheels The phone default. Scrolling columns for hour, minute and AM or PM, with the chosen row in a band across the middle. - [Halcyon](https://kombai.com/gallery/inspirations/time-picker-ios-29/) (Mobile) - [Perch](https://kombai.com/gallery/inspirations/time-picker-ios-26/) (Mobile) - [Nocturne](https://kombai.com/gallery/inspirations/time-picker-ios-10/) (Mobile) ### 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. - [Caretide](https://kombai.com/gallery/inspirations/time-picker-ios-5/) (Mobile) - [Larkline](https://kombai.com/gallery/inspirations/time-picker-web-33/) (Web) - [Amberleaf Studio](https://kombai.com/gallery/inspirations/time-picker-web-14/) (Web) ### 3. Dropdown lists A time field that opens a list in 15 or 30 minute steps, common in desktop event and publishing forms. - [Loomfield](https://kombai.com/gallery/inspirations/time-picker-web-3/) (Web) - [Thicket](https://kombai.com/gallery/inspirations/time-picker-web-4/) (Web) - [Rookline](https://kombai.com/gallery/inspirations/time-picker-web-46/) (Web) ### 4. Durations Hours and minutes wheels with the units written in, for timers, countdowns and logged sessions. - [Copperpot](https://kombai.com/gallery/inspirations/time-picker-ios-21/) (Mobile) - [Murmur](https://kombai.com/gallery/inspirations/time-picker-ios-30/) (Mobile) - [Stridewell](https://kombai.com/gallery/inspirations/time-picker-ios-8/) (Mobile) ### 5. Start and end times Two times joined by a dash, often repeated per weekday, for working hours and availability. - [Fernvale](https://kombai.com/gallery/inspirations/time-picker-web-8/) (Web) - [Relayline](https://kombai.com/gallery/inspirations/time-picker-web-40/) (Web) - [Chalkline](https://kombai.com/gallery/inspirations/time-picker-ios-16/) (Mobile) ### 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. - [Reveille](https://kombai.com/gallery/inspirations/time-picker-ios-1/) (Mobile) - [Marlowe](https://kombai.com/gallery/inspirations/time-picker-web-1/) (Web) - [Kestrel](https://kombai.com/gallery/inspirations/time-picker-ios-28/) (Mobile) ## 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. - [Verano](https://kombai.com/gallery/inspirations/time-picker-ios-12/) (Mobile) - [Corbin & Hale](https://kombai.com/gallery/inspirations/time-picker-web-12/) (Web) - [Fern & Field Studio](https://kombai.com/gallery/inspirations/time-picker-web-29/) (Web) ### Deliveries and pickups One or two hour windows instead of exact times, with fees or busy labels on each. - [Basketline](https://kombai.com/gallery/inspirations/time-picker-ios-3/) (Mobile) - [Pantryhop](https://kombai.com/gallery/inspirations/time-picker-web-41/) (Web) - [Kerbside](https://kombai.com/gallery/inspirations/time-picker-ios-23/) (Mobile) ### Restaurant tables Party size, date and time together, with the nearest open times as chips. - [Cindermill Chophouse](https://kombai.com/gallery/inspirations/time-picker-web-39/) (Web) - [Fernhouse](https://kombai.com/gallery/inspirations/time-picker-ios-20/) (Mobile) - [Trestle](https://kombai.com/gallery/inspirations/time-picker-web-50/) (Web) ### Reminders and quiet hours A time to start a fast, open a room or stop notifications, set once and repeated. - [Tuckstone](https://kombai.com/gallery/inspirations/time-picker-web-13/) (Web) - [Halloo](https://kombai.com/gallery/inspirations/time-picker-ios-27/) (Mobile) - [Mealtide](https://kombai.com/gallery/inspirations/time-picker-ios-18/) (Mobile) ## Time picker vs similar components | | [Time picker](https://kombai.com/glossary/time-picker/) | [Date picker](https://kombai.com/glossary/date-picker/) | [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) | [Stepper](https://kombai.com/glossary/stepper/) | |---|---|---|---|---| | Picks | A time of day or a length | A day or a range of days | One option from a list | A number, one step at a time | | Steps | Minutes, often 5 to 30 | Days, weeks and months | Whatever the list holds | One unit per tap | | Best for | Alarms, bookings, timers | Bookings and due dates | Short lists of choices | Quantities and guests | ## Build notes - For simple forms, use . 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 - [Date picker](https://kombai.com/glossary/date-picker/) - [Calendar](https://kombai.com/glossary/calendar/) - [Stepper](https://kombai.com/glossary/stepper/) - [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) ## References - [MDN: The time input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time) - [WAI-ARIA Authoring Practices: Spinbutton pattern](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/)