Updated: January 27, 2018



A picker is a control for selecting a single value by scrolling a  short list which contains predictable values of a logical order.  The scrollable list of a picker is displayed on the same screen where the picker is activated. The selected value appears and gets updates in the same cell of the label when a value is scrolled to the center of the picker view.



  • Use a picker for choosing single value from a list of predictable and logically ordered values.
  • Use a picker for numeric values with defined format.


  • Don’t use a picker when the values are random or dynamic. The user should be able to expect the content on the picker.
  • Don’t use a picker when the lists are long. Use a value list on a new screen for easier interaction.
  • Don’t use a picker to navigate to new screen to select value.


A picker includes:

A. Table cell with a label and selected value. Tapping on the selected value, the scrollable values appear or collapse.

B.Scrollable values. Values in a picker only appear when the picker is activated.


Date Pickers

A date picker is for selecting a specific time, date or both. It can also be used for a duration of time. Please read more on Time and Data Format.

Date. Displays months, days of the month, and years.

Time. Displays hours, minutes, and (optionally) an AM/PM designation.

Date and time. Displays dates, hours, minutes, and (optionally) an AM/PM designation.

A duration of time. Displays hours and minutes, up to a maximum of 23 hours and 59 minutes.

Value Pickers

A value picker can be used for selecting values of text or number. For numbers, design appropriate  granularity of the values.


The scrollable list can either be shown right under the cell of label and selected value or a popover on the screen. Keep the list close to the label cell.

Always give a default selected value to the picker, for example, the date picker has a default value of “Today”.  Avoid leaving the value blank.

Behavior & Interaction

Expose and Hide the list

By tapping on the selected value, the users are able to see the values in a scrollable list. The selected value becomes highlighted in tint color to indicate that it is interactive. Tapping on the tinted selected value, the list will hide.


Scroll a value from the list to the middle of the picker view to select it. The selected value is of a darker text color.


In regular size, the picker list can either be shown under the cell or as a popover close to the cell. To dismiss the popover, the users can tap on the selected value in the cell or tap on the outside area of the popover.