Updated: November 26, 2020

Pickers

Intro

A picker is used for selecting a single value by scrolling through a short list of predictable values. It’s commonly used for selecting dates, time, or the combination of both.

Structure

A picker includes the elements below:

A. Table cell

The table cell displays a label and a selected value. The selected value will be in tint color when the picker is active.

B. Scrollable list

The scrollable list contains values in a logical order. It can be accessed by tapping on the table cell.

Variants

Date Picker

Use a date picker to select a specific time, date or the combination of both.

Date: displays months, days in the month, and years.

Time: displays hours, minutes, and an AM/PM designation.

Date and time: displays dates, hours, minutes, and an AM/PM designation.

For more information about displaying time and dates, see Time and Date Formats.

Value Picker

A value picker can be used for selecting any values of text or numbers. For numbers, always include appropriate granularity of the values.

Duration Picker

Use a duration picker to select a length of time including hours and minutes. The maximum of the duration picker is 23 hours and 59 minutes.

Behavior & Interaction

Adaptivity

Pickers are supported in both compact and regular widths.

In regular width, the scrollable list can be shown below the table cell in a form sheet modal.

Srollable List

If the picker is included in a full screen modal, the scrollable list should ideally be displayed in a popover. 

Resources