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 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.
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.
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.