...
Lists are continuous, vertical indexes of text and images.
They are composed of items containing primary and in some cases supplemental information, which can be shown as text, icons, or images.
The component may be part of a page layout or in a Popover. They also often appear as a sub-component within a larger element, such as a Drop-down Menu, Drag and Drop, or Combo Box.
 |  |  |
Types
Type | Image | Usage |
Simple list (single selection) |  | The most common list is a flat collection of objects.Checkbox list |
Multiple selection |   | A list where the user can select multiple options. Tree list |
Smart selection |  | A hierarchical list with expanding and collapsing nodes which contain nested items. See the Tree page.combination of single and multiple selection (see explanation below) |
Usage & Behavior
General guidelines
...
List items must have a label, with the main object name. If the entire name does not fit, it can be truncated and a Tooltip can be used on hover.
List items can optionally also have:
A leading icon. These should only be used if the list can contain several types of objects. If all items are of the same type, an icon should not be used.
A leading image.
Up to 2 secondary lines of text. Secondary lines cannot have their own leading icons or images.
Extra metadata, such as a tag, text, or an icon. These should be positioned to the right of the item, centered vertically.
Up to 2 action icons, such as delete. These should only appear on hover or when an item is selected. They should be positioned to the right of the item, centered vertically (replacing the extra metadata, if exists).
The List Header
The list header may include:
A “select all” checkbox, for lists which support multi-select, the number of selected items will be displayed in brackets to the right of the total number of items. selection (optional).
Total no. of items.
No. of selected items, for lists which support multi-selection.
If no item is selected it should display “(0 selected)”.
Header for single selection lists | כ |
|---|---|
 |  |
Lists can also have
A search field on long lists, allowing users to find items easily (See Interactions below).
Paginationfor very long lists.
Show only selected
Long lists may include a ‘Show only selected’ option. See Interaction below.
...
List Variations
Single-line list | Two-line list | Three-line list | |
|---|---|---|---|
Full list |  | |  |
Single Item |  |  |  |
Single item with icon / image |  |  |  |
Single item with multi select |  |  |  |
...
A preceding label at the top of the list, showing the total number of items included in the list.
A Search field on long lists, allowing users to find items easily.
...
Internal Logic
Lists should be ordered in logical ways that make the content easy to scan. Order the list using one of these rules:
...
Interaction | Screenshot | |
|---|---|---|
Single Selection |
|
|
Multiple selection |
|
|
Smart Selection |
|
|
Search
When the list includes a search Search field and the user starts typing the characters:
Characters on the list that match the typed characters will be highlighted.
List items that do not contain the
...
typed characters will be hidden.
The number of found results will count all items that contain the searched characters. The text to display will be “<number> found…”. This number will replace the total number of items.
For multiple selection or smart selection lists:
The “selected” indication will still be displayed.
If the user checks the “select all” checkbox, only the visible children will be selected.
...
When no items match the search term, an empty state will be shown.
...
Show only selected
When the ‘Show only selected’ Switch button is on:
the list will be filtered to only show the selected nodes.
the nodes will be displayed exactly as they are after a search.
...
When there are no selected items, an empty state will be shown.
...
When the user uses both the search field and the switch, the results would show the overlapping items (that is the ones that are both selected and that contain the searched characters).
Best practices
Use:
when there is a need to select one or more items from a list.
when you want to show relevant content for each list item.
when content may vary between rows (contrary to a data table, which is more strict in nature).
...