Please note that the contents of this offline web site may be out of date. To access the most recent documentation visit the online version .
Note that links that point to online resources are green in color and will open in a new window.
We would love it if you could give us feedback about this material by filling this form (You have to be online to fill it)
Components List controls
This document is a preview.

Google ©

Privacy & Terms

List controls

Usage Expand and collapse content An arrow that points down when collapsed and points up when expanded.

List controls fall under four categories:

  • State
  • Primary action (including text strings)
  • Secondary action
  • Secondary info

Distinguishing elements of list titles need to be first in read order, so states and primary actions are placed on the left side of a list title. Text within a list item should be considered part of the primary action target.

Don’t place two icons or actions next to one another, such as a checkbox next to an avatar.

If the primary action of the list item is navigational, don’t use an icon. The list item itself and its context should be sufficient to communicate the destination.

Secondary actions and Info should be placed on the right side of the title. Secondary actions are always a separate target from the primary action, as users increasingly expect every icon to trigger an action.

Types of list controls Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Checkbox

A checkbox can either be a primary action or a secondary action.

Type: Primary Action/ State

Separate target

Desktop on hover only.

Checkbox is the primary action and the state indicator for the list item.

Type: Secondary Action

Separate target

When controlling a family of variables, instead of just one, consider using switches instead.

Checkbox is the secondary action for the list item.

Switch

Type: Secondary Action

Separate target

Reorder

Type: Secondary Action

Usually a separate target, depending on mode list is in.

Allows dragging of list item to other locations within the list. Usually appears in list editing mode.

Expand/Collapse

Type: Secondary Action

Separate target

Expands and collapses a list view vertically to show and hide existing list items.

Leave Behinds

Type: Other

A leave-behind is an informative hint as to what swiping a list item away will do to that item. The leave-behind can transform into an action.

Swiping on a list item from either direction will reveal an icon indicating the action. After swiping, the action appears as a text button centered within the list item space.

Discouraged: Navigational List Controls

Generally, navigation is implied through the text on the list item itself. An extra glyph is not necessary.

See more

Type: Primary Action (along with the rest of the row)

Not a separate target.

Leads to more information related to the list item, usually in a new view or pane.

Types of menu controls Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Check

Type: State

Not a separate target.

Menus only. Denotes if list item is selected through a different control.

Inline Information

Type: Secondary Info

Not a separate target.

Menus only. Inline information is a small snippet of text related to the line title that can provide information or a tip, like a keyboard shortcut. It cannot be truncated.