Time Picker
Time pickers allow users to select a time value. Material Design 3 provides both dial-based and input-based time pickers for different use cases.
Time Input Field
A text field with a clock icon that opens the time picker when clicked.
Dial Time Picker
The dial time picker provides a clock-face interface for selecting hours and minutes.
SELECT TIME
10
:30
12
1
2
3
4
5
6
7
8
9
10
11
Input Time Picker
An alternative keyboard-based time picker for quick entry.
ENTER TIME
:
24-Hour Format
The time picker can also display in 24-hour format without AM/PM selection.
SELECT TIME
14
:30
Brand Properties
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| selectedTimeBackground | color | #EADDFF | #038012 20% | #1A5129 20% |
| selectedTimeColor | color | #6750A4 | #038012 | #1A5129 |
| dialBackground | color | #E6E0E9 | #F6ECDA | #F2E8DD |
| dialHandColor | color | #6750A4 | #038012 | #1A5129 |
| selectedHourBackground | color | #6750A4 | #038012 | #1A5129 |
| selectedHourTextColor | color | #FFFFFF | #FFFFFF | #FFFFFF |
| periodButtonActiveBackground | color | #6750A4 | #038012 | #1A5129 |
| actionButtonColor | color | #6750A4 | #038012 | #1A5129 |
| containerBorderRadius | string | 28px | 12px | 12px |
| timeFontSize | string | 48px | 48px | 48px |
| dialSize | string | 224px | 224px | 224px |
Usage Guidelines
- Use the dial picker for touch-friendly interfaces where precision is not critical
- Use the input picker when users need to enter precise times quickly
- Support both 12-hour and 24-hour formats based on user locale preferences
- Clearly indicate AM/PM selection in 12-hour format
- Provide keyboard navigation for accessibility