...

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 Modified

Types

Type	Image	Usage
Simple list	Image Modified	The most common list is a flat collection of objects.

Check box

Checkbox list

Image Modified

A list where the user can select multiple options.

Image Modified

A hierarchical list with expanding and collapsing nodes which contain nested items. See the Tree page.

Usage & Behavior

...

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

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

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 on long lists, allowing users to find items easily.
- A pagination component

...

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.

On hover, the row will be highlighted and Check Boxes 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.

There are three possible selection modes:

	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 Modified
Multi-select

check boxes

checkboxes

check box

checkbox 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 Modified
Smart Selection	On hover anywhere over an item, a

check box

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

check boxes

- 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 Modified

When scrolling, the title and Search bar should stick to the top and remain visible.

Image Modified

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

...

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

Keyboard	Description
Tab	From a previous component If no item is selected, moves focus to the first item in the list. If an item is selected, moves focus to the first selected item. From the last item in the list, will navigate to the next component
Shift + Tab	From the next component If no item is selected, moves focus to the first item on the list. If an item is selected, moves focus to the first selected item. From the first item in the list, will navigate to the previous component
Space	Selects or actions the item.
Enter	Selects or actions the item.
Esc	N/A
Arrows	Up/Down - Navigates between the items accordingly. Focus will stop on either the first or last item. Holding down the key will scroll continuously.
Page Up/Home	Navigates to the first item.
Page Down/End	Navigates to the last item.
a-z, A-Z	Moves focus to the next list item with a label starting with the typed character(s), if such an item exists. Typing multiple characters in rapid succession moves the focus to the next list item starting with the string of typed characters. If no item labels match the typed character(s), the focus does not move.