Pickers are used to set a single, specific value from a given set.
Use pickers to set a number, a date, or time.
A number picker shows changed values as touch the screen or rotates the bezel. For a bezel-less device, the user can swipe up or down to achieve the same effect.
Users set a value on a picker by rotating the bezel or swiping up or down.
You can have multiple pickers on one page at the same time. Pickers on the same page should present values of the same category, for example, hour and minutes in a clock. A picker is highlighted when users tap it, and changes values as users rotate the bezel or swipe up or down.
Users can tap to switch between multiple pickers on a page.
A confirmation button at the bottom confirms the set value.
Distribute pickers across multiple pages if you need to present different kinds of values together. For example, if users need to set both the time and date, have a time picker on one page and a date picker on the next. Pages can be navigated only by swiping left or right . We recommend providing linear page indicators to show which page is currently being viewed.
A number picker is the most basic type of this component.
|Number picker in developer's guides|
A number picker is the most basic picker type. One or more pickers can be placed on one page.
Date pickers set the day, month, and year. Spinning dials present values for each category: 12 months, 28/29/30/31 days, and 50 years. One full spin of the year dial is 50 years. Refer to Date and time for style guides on displaying the date.
|Date picker in developer's guides|
* A date picker sets the date Developer can also display the day of the week as an option*
Time pickers can set hours and minutes, and toggle between AM and PM. The AM/PM button appears when the picker uses the 12-hour format and is hidden for the 24-hour format. See Date and time for more information about displaying time.
|Time picker in developer's guides|
A time picker sets the time.
A color picker allows users to choose a color. This picker is displayed as a rotary selector with the focused color in the center of the screen. When users pick a color, it returns them to the previous screen. You can customize the colors on a picker.
|Color picker in developer's guides|
A color picker is provided as a rotary selector and picks a color.