UX Patterns Guide
Back to compare picker

Time picker vs Text input vs Select vs Input mask

Prefer time picker when the task asks for a specific appointment, meeting, delivery, reminder, or service time from predictable increments.

Time picker live exampleText input live exampleSelect live exampleInput mask live example

Decision dimensions

Dimension Time pickerText inputSelectInput mask
UI or UX UI + UX - Time input with filtered slot list, period selector, and timezone selectorUI + UX - Single-line freeform data-entry controlUI + UX - Single-choice dropdown controlUI + 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.Use text input for short freeform answers that users can type or paste and that cannot be accurately represented as a fixed option choice.Help users choose one value from a moderate known list without showing every option permanently.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 single field labelled Time accepts 930 and silently stores it without AM/PM, timezone, or validation message.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 types or pastes a short reference, submits it, and the interface confirms the stored value without changing their wording.Users can open, scan, choose one value, and review the selected value after close.A user pastes abcd1234567, sees ABCD 123456 7, reviews the canonical value, and fixes one middle digit without retyping the whole code.
Bad UX A user chooses 2:00 from a list and the service books 2:00 AM because no period selector or timezone context was shown.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.Keep a real visible label and do not use the mask pattern or placeholder as a substitute for the field name.
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.Custom select with no keyboard support or hidden selected state.Using a mask because a format exists even though many valid values do not fit it.

Time picker

UI or UX
UI + UX - Time input with filtered slot list, period selector, and timezone selector
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.
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.
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.
Bad UI
A single field labelled Time accepts 930 and silently stores it without AM/PM, timezone, or validation message.
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.
Bad UX
A user chooses 2:00 from a list and the service books 2:00 AM because no period selector or timezone context was shown.
Best fit
Users choose appointment, meeting, delivery, pickup, reminder, or service times.
Avoid when
The answer is approximate, relative, unknown, or naturally expressed in words.
Required state
Empty labelled time field with persistent hint and optional timezone default.
Accessibility burden
Use a visible label and persistent hint that explain filtering, increments, and time range.
Common misuse
Using a minute-by-minute dropdown for a schedule that only accepts 30-minute increments.

Text input

UI or UX
UI + UX - Single-line freeform data-entry control
UI guidance
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.
UX guidance
Use text input for short freeform answers that users can type or paste and that cannot be accurately represented as a fixed option choice.
Good UI
A reference-name field has a visible label, hint, medium width, focus ring, and error message beneath the hint when submitted empty.
Bad UI
The only instruction is placeholder text that disappears when the user starts typing.
Good UX
A user types or pastes a short reference, submits it, and the interface confirms the stored value without changing their wording.
Bad UX
Validation fires on the first focus event and blocks typing before the user has had a chance to answer.
Best fit
The answer is short and user-authored.
Avoid when
The answer is a paragraph, comment, address block, or explanation requiring multiple lines.
Required state
Empty untouched state with persistent label and optional hint.
Accessibility burden
Associate every text input with a visible label or equivalent accessible name that matches the visible question.
Common misuse
Using placeholder text as the only label or instruction.

Select

UI or UX
UI + UX - Single-choice dropdown control
UI guidance
Render a persistent label, hint text, native closed value, finite option list, selected option, and validation state.
UX guidance
Help users choose one value from a moderate known list without showing every option permanently.
Good UI
Persistent label, hint text, visible selected value, readable options, and clear required validation state.
Bad UI
Placeholder as the only label.
Good UX
Users can open, scan, choose one value, and review the selected value after close.
Bad UX
Hiding two obvious critical choices in a dropdown.
Best fit
The user chooses one option from a moderate known list.
Avoid when
The option set is short and comparison matters.
Required state
Closed state with empty option or current selected value.
Accessibility burden
Prefer native semantics or implement equivalent name, role, state, and keyboard behavior.
Common misuse
Custom select with no keyboard support or hidden selected state.

Input mask

UI or UX
UI + UX - Fixed-format text entry control
UI guidance
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 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
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 phone field hard-codes a domestic mask and rejects valid international numbers.
Good UX
A user pastes abcd1234567, sees ABCD 123456 7, reviews the canonical value, and fixes one middle digit without retyping the whole code.
Bad UX
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
The value has a stable character pattern and users benefit from live grouping.
Avoid when
Valid values have many lengths, regions, scripts, or exception formats.
Required state
Empty untouched state with label and visible format example.
Accessibility burden
Keep a real visible label and do not use the mask pattern or placeholder as a substitute for the field name.
Common misuse
Using a mask because a format exists even though many valid values do not fit it.
Decision rules
  • Prefer time picker when the task asks for a specific appointment, meeting, delivery, reminder, or service time from predictable increments.
  • Prefer text input when users must enter an approximate, historical, unknown, or freeform time such as around dawn, after lunch, or time of birth from a record.
  • Prefer select when there are only a few fixed slots, such as Morning, Afternoon, Evening, or three appointment windows.
  • Prefer input mask only when the product requires a rigid HH:mm or HH:mm:ss string and the mask does not block correction, paste, localization, or AM/PM entry.
  • Use a visible label and hint that explain filtering, valid time range, minute step, and timezone when those affect scheduling.
  • Expose min time, max time, unavailable time, selected time, filtered options, empty query, invalid format, and out-of-hours states.
  • Support both 12-hour display with AM/PM and canonical 24-hour storage when the audience expects 12-hour time.
  • Show timezone or location whenever the selected time can be interpreted differently across users, stores, offices, or services.
  • Do not auto-submit when a time option is highlighted or selected; users often change time choices while scanning nearby slots.
  • Validate client and server values against range, step, availability, timezone, and required-field rules before storing the canonical value.
Inspect live examples
Time pickerText inputSelectInput mask
Failure modes
  • A time picker stores 2:30 without AM/PM or timezone, so users and backend systems interpret different moments.
  • A dropdown contains every minute of the day even though the service only accepts 30-minute appointments.
  • Filtering 9 shows unrelated times because the option text does not include familiar strings such as 9:00 AM.
  • A mask rejects pasted 09:30 or localized input and gives only a format error.
  • Selecting a time immediately submits the form before the user can review the date, timezone, or other fields.
  • Only the invalid select is styled, but the error text does not say whether hour, minute, AM/PM, timezone, or availability failed.