Time picker

​

Time picker

​

When to use

• Time-only input where a visual selector is clearer than free text.
• Paired with Date picker when both date and time are required.
• Inside Date and time picker and Date time range picker flows.

​

When not to use

• When only a date is needed, use Date picker instead.
• For time range input without dates, pair two instances with clear “start” and “end” labels or use a dedicated range primitive.

​

Dos and don’ts

• Do match the time format (12hr/24hr) to the user’s locale or application setting — don’t hardcode one.
• Do include AM/PM selection clearly when using 12-hour format; ambiguity here causes real errors.
• Don’t include seconds unless the context requires it (log timestamps, precise scheduling) — it adds complexity most users don’t need.

​

Behavior

• When paired with Date picker, the date and time should feel like one composed input — changes to either should update a single combined value, not two separate ones.
• If the time value has constraints (e.g. only future times, business hours only), disable invalid times rather than letting users select them and fail on submit.

​

Often used with

• Date picker, Date and time picker, Label, Helper text.