A picker includes one or more scrollable lists of distinct values, each of which has a single selected value - appearing in darker text in the center of the view.
Pickers
Guidelines
A picker is often displayed at the bottom of the screen or in a popover when the user is editing a field or tapping a menu. Pickers can also appear inline, such as while editing a date in a Calendar event. The height of a picker is roughly the height of five rows of list values. The width of a picker is either the width of the screen or its enclosing view, depending on the device and context.
- Use predictable and logically ordered values. Many values in a picker may be hidden when the scrollable lists are stationary. It's best when people can predict what these values are, such as with a list of alphabetized countries, so they can move through the lists quickly.
- Avoid switching screens to show a picker, display it in context, in proximity to the field being edited.
- Use a table instead of a picker for large value lists, as long lists can be tedious to navigate in a picker.
Date pickers
A date picker is an efficient interface for selecting a specific date, time, or both. It also provides an interface for displaying a countdown timer. A date picker has four modes, each of which presents a different set of selectable values.
- 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
- Countdown timer - Displays hours and minutes, up to a maximum of 23 hours and 59 minutes
Consider providing less granularity when specifying minutes. By default, a minute list includes 60 values (0 to 59). You can optionally increase the minute interval as long as it divides evenly into 60. For example, you might want quarter-hour intervals (0, 15, 30, and 45).
