Use a time picker when users choose a specific clock time from meaningful increments; use text input for unusual or approximate times, select for a few fixed slots, and input mask only for rigid machine-readable time strings.
Use a time picker when users choose a specific clock time from meaningful increments; use text input for unusual or approximate times, select for a few fixed slots, and input mask only for rigid machine-readable time strings.
Practice the judgment: Imagine this situation: A dropdown contains every minute of the day even though the service only accepts 30-minute appointments. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Time picker | Text input | Select | Input mask |
|---|---|---|---|---|
| UI or UX | UI + UX - Time input with filtered slot list, period selector, and timezone selector | UI + UX - Single-line freeform data-entry control | UI + UX - Single-choice dropdown control | UI + UX - Fixed-format text entry control |
| UI guidance | Render a labelled time field with persistent hint text, filtered time suggestions, clear selected state, AM/PM control when using 12-hour display, and timezone control when interpretation depends on location. | Render a persistent label, appropriately sized single-line input, optional hint, visible focus state, and nearby error text that is programmatically associated with the field. | Render a persistent label, hint text, native closed value, finite option list, selected option, and validation state. | Show a persistent label, visible example or hint, fixed grouping, literal separators, and field-adjacent error text so users understand which characters are typed and which are supplied by the mask. |
| UX guidance | Use a time picker when users are scheduling or choosing a specific clock time from predictable increments such as 15-minute or 30-minute appointments. | Let users edit normally, validate after interaction or attempted submit, preserve their typed value after errors, and explain exactly how to fix invalid or missing text. | Help the person reach a clear task outcome. | Use an input mask to help users enter data that has a stable character structure, especially when grouping matches the physical document, card, container code, or serial key users are copying from. |
| Good UI | An appointment time field shows a label, hint that typing filters 30-minute slots, a 9:30 AM selected option, AM/PM selector, Eastern timezone selector, and canonical value 09:30:00. | A reference-name field has a visible label, hint, medium width, focus ring, and error message beneath the hint when submitted empty. | Persistent label, hint text, visible selected value, readable options, and clear required validation state. | A container number field shows the example ABCD 123456 7, groups pasted characters into that shape, and displays the raw value ABCD1234567 before submit. |
| Bad UI | A dropdown lists 1,440 minute-by-minute options even though appointments are only available every half hour. | The only instruction is placeholder text that disappears when the user starts typing. | Placeholder as the only label. | A phone field hard-codes a domestic mask and rejects valid international numbers. |
| Good UX | A user types 9, filters the list to 9:00 AM and 9:30 AM, chooses 9:30 AM, selects Eastern time, and submits canonical value 09:30:00 America/New_York. | A user leaves the required field blank, sees an error only after submit, returns to the same field, and their later typed value clears the error. | Users can open, scan, choose one value, and review the selected value after close. | A user submits ABCD 123 and receives a precise error that the six-digit serial group and check digit are incomplete. |
| Bad UX | A historical time-of-birth field forces a scheduling dropdown even though the user needs to type the exact recorded time. | Validation fires on the first focus event and blocks typing before the user has had a chance to answer. | Hiding two obvious critical choices in a dropdown. | A user pastes a valid value with spaces and the mask discards characters because it only supports one-character-at-a-time typing. |
| Best fit | Users choose appointment, meeting, delivery, pickup, reminder, or service times. | The answer is short and user-authored. | The user chooses one option from a moderate known list. | The value has a stable character pattern and users benefit from live grouping. |
| Avoid when | The answer is approximate, relative, unknown, or naturally expressed in words. | The answer is a paragraph, comment, address block, or explanation requiring multiple lines. | The option set is short and comparison matters. | Valid values have many lengths, regions, scripts, or exception formats. |
| Required state | Empty labelled time field with persistent hint and optional timezone default. | Empty untouched state with persistent label and optional hint. | Closed state with empty option or current selected value. | Empty untouched state with label and visible format example. |
| Accessibility burden | Use a visible label and persistent hint that explain filtering, increments, and time range. | Associate every text input with a visible label or equivalent accessible name that matches the visible question. | Prefer native semantics or implement equivalent name, role, state, and keyboard behavior. | Connect hint, format example, canonical-value note, and error text to the input with descriptive relationships where supported. |
| Common misuse | Using a minute-by-minute dropdown for a schedule that only accepts 30-minute increments. | Using placeholder text as the only label or instruction. | Using select to hide two or three obvious choices that should be compared. | Rejecting pasted values that include spaces, dashes, parentheses, or lowercase characters. |