Skip to content

Time pickers ​

Time pickers help users select and set a specific time. There are two types of time pickers: dial and input.

Overview · Specs · Guidelines · Accessibility

Time pickers

  • Time pickers are modal and cover the main content
  • Two variants: dial and input
  • People can select hours, minutes, or periods of time
  • Make sure time can easily be selected by hand on a mobile device

Dial time picker dial and input time picker.

  1. Time picker dial
  2. Time picker input

Availability & resources ​

TypeResourceStatus
DesignDesign Kit (Figma)Available
ImplementationFlutterAvailable
ImplementationJetpack ComposeAvailable
ImplementationAndroid Views (MDC-Android)Available
ImplementationWebUnavailable

Differences from M2 ​

Time picker’s old color mappings. The selected hour of 7 and AM text is purple, on a purple background.

M2: Time pickers had different color mappings

Time picker's new color mappings. The selected hour of 7 and AM text is black, with different background colors.

M3: Time pickers have new color mappings compatible with dynamic color

Unofficial offline mirror. Content © Google, licensed under CC BY 4.0.