Components Pickers

Pickers

Pickers provide a simple way to select a single value from a pre-determined set.

On mobile, pickers are best suited for display in a confirmation dialog. For inline display, such as on a form, consider using compact controls such as segmented dropdown buttons. Using these components in your app helps ensure that a user's specific date or time input is formatted correctly.

  • The format of a date picker adjusts automatically to the locale, i.e. month-day-year in the U.S. and day-month-year in other regions.
  • The format of a time picker adjusts to a user’s preferred time setting, i.e. the 12-hour or 24-hour format.

Date pickers Expand and collapse content An arrow that points down when collapsed and points up when expanded.

A dialog picker is used to select a single date on mobile.

The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight.

Date and year picker: Light theme, portrait

Swipe left to right to navigate through the months. Touch the year in the title bar to transition to the year view.

Date picker navigation

The picker view adapts to the device’s orientation.

Date picker: Light theme, landscape

A dark theme picker can complement apps that have a dark theme.

Date picker: Dark theme, portrait

Landscape view of the dark theme picker.

Date picker: Dark theme, landscape

Time pickers Expand and collapse content An arrow that points down when collapsed and points up when expanded.

A dialog picker is used to select a single time (hours:minutes) on mobile.

The selected time is indicated by the filled circle at the end of the clock hand.

Time picker: Light theme, portrait

Tap between the hour and minute label in the title bar to switch between the hour or minute view. Additionally, tap on the AM/PM label in the title bar to switch between AM or PM (in 12-hour clock mode).

Time picker navigation

The picker view adapts to the device’s orientation.

Time picker: Light theme, landscape

A dark theme picker can complement apps that have a dark theme.

Time picker: Dark theme, portrait

Landscape view of the dark theme picker

Time picker: Dark theme, landscape