DISTRIBUTION OF TIZEN-BASED WATCH APPS HAS BEEN DISCONTINUED

Pickers

Pickers are used to set a single, specific value from a given set.

Usage

Use pickers to set a number, a date, or time.

Behavior

  • Changing value

    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.

    Users set a value on a picker by rotating the bezel or swiping up or down.

  • Selecting pickers

    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.

  • Confirmation

    A confirmation button at the bottom confirms the set value.

  • Multiple pages

    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.

Types

  • Number picker

    A number picker is the most basic type of this component.

Number picker in developer's guides
Native

 Spinner
Web

 ―

A number picker is the most basic picker type. One or more pickers can be placed on one page.

  • Date picker

    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
Native

 Datetime
Web

 ―

  • Time picker

    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
Native

 Datetime
Web

 ―

A time picker sets the time.

  • Color picker

    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
Native

 Rotary selector
Selector

 ―

A color picker is provided as a rotary selector and picks a color.