Time picker

Time pickers allow users to select a time value quickly using a text input. They are commonly used for scheduling, reminders, alarms, or any task that requires precise time entry.

When to use

Scheduling tasks

Use time pickers when users need to specify a start or end time for events, reminders, or activities.

Scheduling tasks

Use time pickers when users need to specify a start or end time for events, reminders, or activities.

Scheduling tasks

Use time pickers when users need to specify a start or end time for events, reminders, or activities.

Inputting precise values

When hours and minutes (and sometimes seconds) need to be explicitly set rather than selected from a short list.

Inputting precise values

When hours and minutes (and sometimes seconds) need to be explicitly set rather than selected from a short list.

Inputting precise values

When hours and minutes (and sometimes seconds) need to be explicitly set rather than selected from a short list.

Supporting multiple formats

Allow users to enter or choose times in 12-hour or 24-hour formats, depending on locale or context.

Supporting multiple formats

Allow users to enter or choose times in 12-hour or 24-hour formats, depending on locale or context.

Supporting multiple formats

Allow users to enter or choose times in 12-hour or 24-hour formats, depending on locale or context.

Mobile-friendly entry

Provide an intuitive way to set times on smaller screens without relying on keyboard input.

Mobile-friendly entry

Provide an intuitive way to set times on smaller screens without relying on keyboard input.

Mobile-friendly entry

Provide an intuitive way to set times on smaller screens without relying on keyboard input.

When to avoid

Relative times

Don’t use a time picker if the user only needs to choose approximate or relative times (e.g., “in 30 minutes,” “later today”).

Relative times

Don’t use a time picker if the user only needs to choose approximate or relative times (e.g., “in 30 minutes,” “later today”).

Relative times

Don’t use a time picker if the user only needs to choose approximate or relative times (e.g., “in 30 minutes,” “later today”).

Fixed options

Avoid when the choices are limited to a few preset times… use buttons, chips, or a select menu instead.

Fixed options

Avoid when the choices are limited to a few preset times… use buttons, chips, or a select menu instead.

Fixed options

Avoid when the choices are limited to a few preset times… use buttons, chips, or a select menu instead.

Date and time together

If a user must select both a date and a time, use a combined DateTime picker for clarity and efficiency.

Date and time together

If a user must select both a date and a time, use a combined DateTime picker for clarity and efficiency.

Date and time together

If a user must select both a date and a time, use a combined DateTime picker for clarity and efficiency.

Complex scheduling

Avoid for recurring or advanced scheduling (e.g., “every Monday at 3 PM”); a dedicated scheduling UI is better.

Complex scheduling

Avoid for recurring or advanced scheduling (e.g., “every Monday at 3 PM”); a dedicated scheduling UI is better.

Complex scheduling

Avoid for recurring or advanced scheduling (e.g., “every Monday at 3 PM”); a dedicated scheduling UI is better.

Specifications

Label placement

Stacked

Please note that the stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left to right

Please note the wrapping and truncation rules for the left to right version and how the optional label is below the label.

Stacked

Please note that the stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left to right

Please note the wrapping and truncation rules for the left to right version and how the optional label is below the label.

Stacked

Please note that the stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left to right

Please note the wrapping and truncation rules for the left to right version and how the optional label is below the label.

States

Default

Error

Focused

Disabled

Default

Error

Focused

Disabled

Default

Error

Focused

Disabled

Default

Error

Focused

Disabled

Anatomy

Label

Identifies the purpose of the field (e.g., “Start time”) and provides context for the time being selected.

Leading icon

An optional clock icon that visually reinforces the action of entering or adjusting a time.

Time input

Editable field that displays the selected time and accepts direct text entry.

Period selector

Toggle control for AM/PM selection in 12-hour format; hidden in 24-hour mode.

Dropdown indicator

Affords interaction by opening the dial or input picker for adjusting the time.

Container

The outer shape that holds all elements, giving structure, spacing, and visual consistency.

Value

Time picker

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing