Simple Picker

Simple Picker is a basic horizontal picker that allows the user to select one item from a list.

Behaviours & States

Behaviour

The Simple Picker horizontally displays a list a of options the user can pick from. Only the currently selected option is visible, all other options are hidden from the user. Left and right arrows are used to navigate the list one option at a time.

 

By default, the list of options does not wrap, when the end has been reached, the arrow becomes deactivated and the user must navigate back through to reach the list beginning/end. Alternatively, if wrapping is enabled, the list will loop continuously.

 

There is also the option to animate the options so that they slide.

 

This control may be used to select from a short list of options. Since only one item is visible at a time, it is recommended that the simple picker be used in situations where the options are limited and easily understood. For example, it is appropriate to use this picker to make a selection from a list of time zones or from a short list of languages; it is not appropriate to use Simple Picker with a long, data-driven list. This behaviour and lack of visibility means that Simple Pickers should not be used for long lists.

 

When a user reaches the last item the picker the focus will shift to the opposite arrow button.

States

The Simple Picker has two states normal and deactivated. In normal state, the picker can be interacted with. When deactivated, the control cannot be used.

 

The arrows also have states when the Simple Picker is not deactivated.

 

Normal (up/unpressed) The arrows are available for use and are not selected.
Focus (hover) An arrow has the current focus from the remote and is ready to be selected. Only one arrow can be focused on.
Deactivated (disabled) The arrow cannot be selected because the end of the list has been reached (wrapping is not enabled).

Sizing

The Simple Picker will be the width of the longest item it contains.

 

If an option is truncated, the text will marquee (scroll) when either arrow is in the focus state.

Illustration

SIMPLE_PICKER.png

Navigation