Rotary selectors

The rotary selector arranges multiple items around the circular edge of the screen, and switches the focus between items as users rotate the bezel or tap an item.

Rotary selector in developer's guides

Native

Rotary selector

Web

Selector

he rotary selector displays multiple items in a circle.

Usage

  • Present multiple items to be selected

    The rotary selector can be used on any screen that includes multiple items. The title of an item is only displayed when the item is in focus.

Elements

  • Option icon

    The rotary selector can present up to 11 option icons on a page. Option icons are ordered clockwise from the top.

  • Option detail

    When an option comes into focus as users rotate the bezel or tap an option, its title, subtext, and icon are shown in the center of the screen. If the option is a toggle button, the current state is displayed as subtext.

  • Previous and next icons

    Previous and next icons are shown when the rotary selector has more than 11 options to display. Moving in a clockwise direction from the top, the previous icon is placed at the left of the first button, and the next icon is placed to the right of the last.

Behavior

  • Focus

    Rotating the bezel by one detent brings the next option on the list into focus. Tapping an option brings that option into focus. An indicator shows which option is currently in focus.

    The rotary selector switches the focus to the next option as the bezel rotates by one detent.

  • Select

    An option in focus performs its assigned task when users tap it . A tap on the center of the screen triggers the task of the item in focus. If an item is a toggle button, tapping the item or its option detail switches its state.

  • Edit

    In the rotary selector, edit mode status can be turned on or off (the default is off). Use the touch-and-hold gesture to enter edit mode.

    Use the touch-and-hold gesture to enter edit mode.

    Users can drag an item to a desired location.

    Items can be moved to the previous or next page.

Design specs

  • Icon

  • Title