Updated: September 16, 2019

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.

Behavior & Interaction

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.

Regular

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

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

Resources