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 the user touches the screen or rotates the bezel. For a bezel-less device, the user can swipe up or down to achieve the same effect.
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.
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.
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.
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.
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.