Skip to content

Components - List:Controls

  1. List controls display information and actions for list items.
  2. List controls provide information, indicate a state, or present actions for list items.
  3. List controls appear as icons to the left or right of list text.

List control placement:

  1. States and primary actions are placed on the left side of a list tile.
  2. Secondary actions and info are placed on the right side of the tile.

Usage :

List controls fall under four categories:

  1. State
  2. Primary action (including text strings)
  3. Secondary action
  4. Secondary info
  • Distinguishing elements of list tiles need to be on the left for left-to-right interfaces, and vice versa.
  • States and primary actions are placed on the left side of a list tile
  • 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.

List:Control Types:

  1. Checkbox
    • A checkbox can either be a primary action or a secondary action.
    • Desktop checkboxes should appear only on hover and focus.
  2. Switch
    • Type: secondary action
    • Separate target
  3. Reorder
    • Type: secondary action
    • Usually a separate target, depending on which mode list it is in.
    • Allows dragging of the list item to other locations within the list.
    • It usually appears in list editing mode.
  4. Expand/collapse
    • Type: secondary action
    • Separate target
    • Expands and collapses a list view vertically to show and hide details of existing list items.
  5. 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, a follow-up action can appear as a text button within the space of the list item.

Types of menu controls:

  • A menu is a special type of list.
  • In menus, use controls that are appropriate for dropdown menus, overflow menus, and so on.
  • Don’t use these controls in regular lists. Use the regular list controls instead.

Check:

  1. Type: state
  2. Not a separate target.
  3. Menus only. Indicates that the list item has been selected. The selection is done through a different control.

Inline information

  1. Type: secondary info
  2. Not a separate target.
  3. 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.

Nested menu indicator

  1. Type: primary action
  2. Not a separate target.
  3. Menus only. The glyph indicates that a secondary menu will fly out upon hover, focus, and/or selection.