Selection mode

Selection mode is a design pattern for allow actions to be performed on items of content. It is typically used in conjunction with lists and grids.

When selection mode is active, check boxes allow items to be selected, and an action bar is shown at the bottom of the view. This contains the various actions that can be performed on selected content items.

When to use

Selection mode is appropriate when:

  • It is common to perform actions simultaneously on multiple content items.

  • Multiple actions are available to be performed on content items.

  • It is helpful for users to be able to perform actions on content items without opening them.

If it is more typical for users to perform actions on single content items, you might want to consider another design pattern, such as a context menu. Likewise, if there is only one action that can be performed on content items, a variant of selection mode can be used (an overlaid button could allow the action to be performed on items directly, rather than requiring them to be selected first, for example).

Activating selection mode

The primary way of activating selection mode is through the selection mode button, which is located in the header bar and which is identified by a check mark icon. Selection mode can also be activated by rubber band selection, or by holding Ctrl or Shift and clicking/pressing content items.

The action bar

  • Controls in the action bar should be insensitive when no items have been selected. Sometimes actions may only be applied to multiple content items; in this case the relevant controls should only be sensitive when multiple items are selected.

  • Controls in the action toolbar can have icons or text labels.

  • Groups of actions can be distinguished by placing them at either end of the toolbar. Destructive actions, like delete, should be placed away from other controls.