Description

• 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.

Open

Open

Open

Types

Type	Image	Usage
Simple list (single selection)	Open	The most common list is a flat collection of objects.
Multiple selection	Open	A list where the user can select multiple options.
Smart selection	Open	A combination of single and multiple selection (see explanation below)

Usage & Behavior

General guidelines

Structure

• 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-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	כ

Header for single selection lists	כ
Open	Open

• Lists can also have

  • A search field on long lists, allowing users to find items easily (See Interactions below).

  • Pagination for very long lists.

Show only selected

Long lists may include a ‘Show only selected’ option. See Interaction below.

Open

List Variations

	Single-line list	Two-line list	Three-line list

	Single-line list	Two-line list	Three-line list
Full list	Open	Open	Open
Single Item	Open	Open	Open
Single item with icon / image	Open	Open	Open
Single item with multi select	Open	Open	Open

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

State	Image
Regular	Open
Hover	Open
Active	Open
Active, Hover	Open
Disabled	Open
Focused	Open
Focused, Hover	Open
Focused, Active	Open
Focused, Disabled	Open

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

	Interaction	Screenshot
Single Selection	Only one item can be selected. Clicking anywhere on the item row will select it. One item must always be selected. Selecting an item will automatically deselect the previously-selected item.	Open
Multiple selection	Clicking on any checkbox or anywhere on the item row will select or deselect the corresponding item. Items can also be selected by holding the ctrl or shift keys on the keyboard and clicking anywhere on the item.	Open
Smart Selection	On hover anywhere over an item, a checkbox appears. 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: By directly checking any item checkboxes. By holding the ctrl or shift keys on the keyboard and clicking anywhere on the item. When relevant, an Apply button will appear, allowing the user to apply the selected items.	Open

Search

When the list includes a 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.

Open

When no items match the search term, an empty state will be shown.

Open

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.

Open

When there are no selected items, an empty state will be shown.

Open

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).

Don’t use:

• For long, complex lists where grouping and categorisation could be applied → use a Tree.

• For items with multiple attributes which need to be displayed → use Data Tables.

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 grasp a large amount of information.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

Design

Zeplin link	Screen thumbnail

Zeplin link	Screen thumbnail
https://zpl.io/V1XnDX2	Open
https://zpl.io/VOZ6QL2	Open
https://zpl.io/aX06xpa	Open
https://zpl.io/aBL3oe2	Open
https://zpl.io/b6qGrNa	Open

Code

Open