---
url: /components/time-pickers/overview.md
description: >-
  Time pickers help users select and set a specific time. There are two types of
  time pickers: dial and input.
---

# Time pickers

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

**Overview** · [Specs](specs.md) · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![Time pickers](/assets/f1088cc3-mrolf3da-time-picker.Bq4ML0xw.webp)

* 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.](/assets/190b62b9-mcyz4dh2-01.DirGB9xV.webp)

1. Time picker dial
2. Time picker input

## Availability & resources

| Type | Resource | Status |
| --- | --- | --- |
| Design | [Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460) | Available |
| Implementation | [Flutter](https://api.flutter.dev/flutter/material/TimePickerDialog-class.html) | Available |
| Implementation | [Jetpack Compose](https://developer.android.com/develop/ui/compose/components/time-pickers) | Available |
| Implementation | [Android Views (MDC-Android)](https://github.com/material-components/material-components-android/blob/master/docs/components/TimePicker.md) | Available |
| Implementation | Web | Unavailable |

## Differences from M2

* Color: New color mappings and compatibility with [dynamic color](../../styles/color/dynamic/choosing-a-source.md "Dynamic color takes a single color from a user's wallpaper or in-app content and creates an accessible color scheme assigned to elements in the UI.")

![Time picker’s old color mappings. The selected hour of 7 and AM text is purple, on a purple background.](/assets/11f90c0d-mcz00a3d-02.zepKnuE_.webp)

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.](/assets/58ec473c-mcz04x96-03.NYSAhRts.webp)

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