UI components · Form input
Time Picker
Also called: Time input, Time select, Time field, TimePicker
An input for picking a specific time of day (hours and minutes). Click it and you scroll through hour and minute columns, or pick from a list of times at fixed intervals.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd a start time picker to the "Book a room" form. The input is 120px wide and 36px tall, with a clock icon on the right and the placeholder "Select time." People can also type 2:30 PM directly. On click, open a panel below the input with two scrollable columns, "Hour" and "Min." Show only hours 8 AM to 8 PM, and minutes in 15-minute steps (00, 15, 30, 45). Give the selected item a dark background, and gray out slots that are already booked so they can't be clicked. Put "Now" and "OK" buttons at the bottom of the panel, and close it on Esc or a click outside. Add an end time too: if the end is before the start, turn it red and show "End time must be after the start time."
Send to
01Decide
Does your content look like this?
Check both columns to confirm Time Picker is what you need.
Use Time Picker when
- When users need to enter a specific time, like a meeting start, a reminder, or a daily send time
- Setting a time range like business hours or on-call hours, "from X to Y"
- Booking flows where people can only pick times at fixed steps (on the hour, half hour)
Pick something else when
You only need the day, not the time
Use insteadDate PickerThere are only two or three choices like morning, afternoon, and evening. Radio buttons or a segmented control are more direct.
You're entering a duration (like 2 h 30 min), not a time of day. Use a number input with a unit.
Use insteadInput
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
A minute column that lists 00 through 59, so users scroll through 60 numbers one by one and end up with odd times like 2:07 that nobody wants
- 02
Fully booked or closed time slots can still be picked, and the error only shows up after submitting
- 03
In a time range, the end time can be earlier than the start time with no warning at all
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
An input with a clock icon plus a pop-up time panel. The panel has scrolling columns for hours and minutes (and seconds), or a single list of times at fixed intervals, often with "Now" and "OK" buttons at the bottom.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A time picker fills in "what time": a meeting start time, business hours, a reminder, a booking slot. It usually looks like an input with a clock icon. Click it and a panel opens with two or three scrolling columns (hours, minutes, sometimes seconds or AM/PM). Once you pick, it fills in something like 2:30 PM, and you can also type straight into the box. Another version just lists times at fixed steps, like every 15 or 30 minutes, which works when people can only book on the hour or half hour.
It's the partner of the Date Picker: the date picker picks the day, the time picker picks the moment within that day. When you need both (say "Sep 18, 2:30 PM"), use a date picker with time, or put a date box and a time box side by side. It's not a Select either. A select picks from a few hard-coded options, while a time picker's options are generated on a pattern and can also be typed in.
Decide the precision and range first. Most cases only need minutes in 5- or 15-minute steps, so don't make people scroll through minutes 0 to 59 one by one. Gray out and disable times outside business hours or already taken. For a time range (start to end), the end can't be before the start. Use 12-hour or 24-hour format based on the user's region and language, and if your product spans time zones, say which one.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-time-picker- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
input[type="time"].ant-picker-time-panel.ant-picker-dropdown:has(.ant-picker-time-panel):not(:has(.ant-picker-date-panel)).ant-picker:has(input[placeholder*="时间"]).ant-picker:has(input[placeholder*="time" i]).el-date-editor--time.el-date-editor--timerange.el-date-editor--time-select.el-time-panel.el-time-range-picker[class*="MuiTimeClock-root"][class*="MuiDigitalClock-root"][class*="MuiMultiSectionDigitalClock-root"].arco-timepicker.t-time-picker.t-time-range-picker.t-time-picker__panel.n-time-picker.n-time-picker-panel.van-time-picker
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
time-pickertimepickertime-selecttime-selectortime-inputtime-range-pickertime-paneltime-spinnerclock-picker
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
TimePickerTimeSelectTimeInputTimeRangePickerTimeFieldDigitalClock
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
form controls
- Priority
- 3 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026