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
When to avoid
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.
States
Anatomy
1
Label
Identifies the purpose of the field (e.g., “Start time”) and provides context for the time being selected.
2
Leading icon
An optional clock icon that visually reinforces the action of entering or adjusting a time.
3
Time input
Editable field that displays the selected time and accepts direct text entry.
4
Period selector
Toggle control for AM/PM selection in 12-hour format; hidden in 24-hour mode.
5
Dropdown indicator
Affords interaction by opening the dial or input picker for adjusting the time.
6
Container
The outer shape that holds all elements, giving structure, spacing, and visual consistency.