...
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 |  | The most common list is a flat collection of objects. |
Checkbox list |  | A list where the user can select multiple options. |
  | A hierarchical list with expanding and collapsing nodes which contain nested items. See the Tree page. |
...
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).
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. If no item is selected it should display “(0 selected)”.
Single-line list | Two-line list | Three-line list | |
|---|---|---|---|
Full list |   | |   |
Single Item |   |   |   |
Single item with icon / image |   |   |   |
Single item with multi select |   |   |   |
Lists can also have:
A preceding label at the top of the list, to inform the user about the 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:
Alphabetical. If there are more than 8 options available, sort them alphabetically. This helps the user to find the right option quickly. Sort currencies, names, and similar content alphabetically.
Numeric. Sort numeric values in a sequential order, with the lowest number first.
Chronological. Sort time-related information into chronological order, with the most recent first.
States
State | Image |
|---|---|
Regular |   |
Hover |  |
Active |   |
Active, Hover |   |
Disabled |   |
Focused |   |
Focused, Hover |   |
Focused, Active |   |
Focused, Disabled |   |
Interaction
On hover, the row will be highlighted and Checkboxes or Icon Buttons will appear, where applicable.
When the label is truncated (item name), hovering over it will show a Tooltip with the full label.
Items in the header area, including the search bar and list title, should remain sticky when the list is scrolled.
Selection
There are three possible selection modes:
Interaction | Screenshot | |
|---|---|---|
Single Selection |
| 
|
Multi-select checkboxes |
| 
|
Smart Selection |
|
 |
Search
When
...
the list includes a search field and the user starts typing the characters, the text “<number> found” or “<number> found out of <total no.>” will be displayed instead of the total no. of items.
...
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).
...
Keyboard | Description |
|---|---|
Tab |
|
Shift + Tab |
|
Space | Selects or actions the item. |
Enter | Selects or actions the item. |
Esc | N/A |
Arrows |
|
Page Up/Home | Navigates to the first item. |
Page Down/End | Navigates to the last item. |
a-z, A-Z |
|
Design
Zeplin link | Screen thumbnail |
|---|---|
  | |
  | |
| |
  | |
  |
Code
...