Multiple Selection

Lists and grids are standard UI components for displaying content within panes. These components allow the user to select items either to reveal further details or to trigger actions on those items. To improve efficiency, an app may enable users to perform an action on multiple items at a time; for example, to delete or move these items. HP webOS has standard UI patterns for making multiple selections and performing actions on multiple selections, as described below.

Photos and Videos

f1. Photos and Videos


The user taps an icon or a button to enter an editing mode.

The icon or button displays in either the header or the footer area.

The icon or button should infer that an action will be performed on multiple items.

Selection mode

f2. Selection mode


In selection mode, replace the content in the header and the footer areas with blue toolbars. These toolbars provide special functions while selection mode is active.

In this mode, the user can select multiple items by tapping different items in the pane. Tapping an item toggles it between selected and unselected states. The selected state is indicated using a blue border.

f3. Multiple items selected


The header toolbar must provide a button to allow the user to cancel out of edit mode ("Cancel") and may optionally provide one to select all items ("Select All").

The header should also indicate how many items have been selected.

The footer toolbar should provide icon buttons to represent actions that can be performed on the selected items. For example, in this case, the icon buttons are "Add to Album" and "Delete".

Multiple Selection in Lists

The same visual pattern applies to lists.

In selection mode, the header and footer toolbars are replaced with blue toolbars.

Selected items have a blue-tinted background.