...
Lists are continuous, vertical indexes of text and images.
They are composed of items containing primary and supplemental information, which are represented by icons and text.They help improve the visual comprehension of the content they holdcan be shown as text or icons.
The component may be part of a page layout as well as popover dialog box. 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 Types
Type | ||
Simple list | | The most common list , is a flat collection of objects. |
Checkbox Check box list | | A list of options where the user may can select multiple options. |
 | a A hierarchical list with expanding and collapsing nodes |
Related components
...
which contain nested items. See the Tree page. |
Usage & Behaviour
General guidelines
Structure
a list item can have a leading icon/image or not, it can non or up to 2 secondly lines.
Single-line list | Two-line list | Three-line list |
|---|---|---|
 | |  |
 |  |  |
 |  |  |
 |  |  |
Icon (optional)
should be used only 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.
List items can optionally also have:
a leading icon. These should only be used if the list can contain several types of
...
object. If all items are
...
the same type, an icon should not be used.
Label
Object name + tooltip in case the entire name does not fit.
Secondly text (optional)
...
a leading image.
up to 2 secondary lines. Secondary lines cannot have their own leading icons
...
Meta data (optional)
...
or images.
extra metadata, such as a tag, text, or an icon.
...
These should be
...
positioned to
...
the right
...
of the
...
item, centered vertically.
Action icons (optional)
Should be aligned to middle and right side of the list item. should appear only on item hover or selected (instead of the meta data if exists)
States:
...
State
...
Image
...
Comment
...
Regular
...
Hover
...
Active
...
Focus
...
Content
Can include: image, tags, icons, secondary text.
Internal Logic
Logical ordering - Lists should be sorted in logical ways that make content easy to scan
Choose one of the following styles to order the list:
Alphabetical: Sort the list items alphabetically if more than 8 select options are available. This helps the user 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 it exists).
Single-line list | Two-line list | Three-line list |
|---|---|---|
| | |
| | |
| | |
| | |
Lists can also have:
A preceding label at the top of the list, to inform the user about the items included in the list.
A Search field can be used for long, scrolling lists, to help the user 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 into 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 | Comment |
|---|---|---|
Regular |  | |
Hover |  | |
Active |  | |
Focused |  |
Interaction
Mouseover an item will highlight On hover, the row and show a checkbox or action icons if exist.
Clicking a single list item will select it.
Clicking a checkbox will select / deselect the relevant item
Click on the item label (+counter) will select the itemwill be highlighted and Check boxes or Icon buttons will appear, where applicable.
When the label is truncated (item name), hovering over it will show a tooltip Tooltip with the full label
...
.
There are three possible selection modes:
Single |
|---|
...
Selection | Multi-select check boxes | Smart Selection |
|---|---|---|
Only one item can be selected. |
...
Clicking anywhere on the item row |
...
Smart selection: Single or multiple selection in a single interaction.
...
Multiple selections: Allow the selection of one or more items. For this, the list provides checkboxes on the left side of each line item. Each item is selected independently of the others
Single Selection | Multiple Selection Mode | Smart Selection |
|---|---|---|
Single selection is activated by selecting the item label. Selecting the item label will select the item and un-select previously will select it. One item must always be selected. Selecting an item will automatically deselect the previously-selected item. | On mouse hover a anywhere over an item, a check box is displayed. If the user checks it he is placed in a multi selection mode. Multi selection mode can also be activated by using Ctrl/Shift while selecting the item label. Mouseover a row will change it to hover state Clicking a row will select that row, deselecting any other rows Check box will appear. Clicking on a check box will select or deselect an item. This can be repeated for multiple items in the list. Items can also be selected by holding the ctrl or shift keys on the keyboard and clicking anywhere on the item. | Clicking anywhere on the item row will select it. As with Single selection, selecting an item in this way will automatically deselect the previously-selected item. Additionally, the user can select multiple items in one of two ways:
|
Scrolling:
...
|
When scrolling, the title and Search bar should stick to the top
...
and remain visible.
 |
Best practices
...
Use when:
A flexible layout is more important than arranging information in a grid.
You want to support relevant content
like a, such as charts.
Content displayed may vary between rows.
Don’t use:
For
a morelong, complex
and longerlists where grouping and categorisation
cancould be applied
(see Tree view)→ use a Tree.
For
morecomplex items with multiple attributes
that shouldwhich need to be displayed → use Data Tables.
Other principles
...
Actionable - Lists present content in a way that makes it easy to identify a specific item in a collection and act on it.
...
General:
An optional Search field can be used for long, scrolling lists, to help the user find items easily.
Visual elements, such as leading icons and images, can help the user to scan and absorb a large amount of information.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
Focus management
We already set a general guidelines described in Keyboard & Focus Management Guidelines
Screen reader support
Make sure the components support screen reader for content or behavior where needed - see Screen Reader Guidelines.
Design
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
...