...

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

Image RemovedImage Added

Image RemovedImage Added

Image RemovedImage Added

Types

Type	Image	Usage
Simple list	Image RemovedImage Added	The most common list is a flat collection of objects.
Checkbox list	Image RemovedImage Added	A list where the user can select multiple options.
Tree list	Image RemovedImage Added	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. When there are no selected items, nothing will be displayedIf no item is selected it should display “(0 selected)”.

	Single-line list	Two-line list	Three-line list
Full list	Image RemovedImage Added	Image RemovedImage Added	Image RemovedImage Added
Single Item
Single item with icon / image
Single item with multi select

...

• 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	Image RemovedImage Added
Hover	Image RemovedImage Added
Active Image Removed	Image Added
Active, Hover	Image Added
Disabled	Image RemovedImage Added
Focused	Image RemovedImage Added
Focused, Hover	Image RemovedImage Added
Focused, Active	Image RemovedImage Added
Focused, Disabled	Image RemovedImage Added

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.

...

	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.	Image Removed Image Added
Multi-select checkboxes	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.	Image Removed Image Added
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.	Image Removed Image Added

Search

When the tree 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.

...