Intro

You can use the list component to display different types of list item. Each list item can include an image, text, icon, or other HTML content. List items can also be grouped.

The list component comes with built-in selection and deletion modes, as well as configurable separators.

https://www.sap.com/design-system/live-examples/List/List_LE_Intro.html

List – live example

When to Use

Do

Use the list:

  • To display a homogeneous set of basic data.
  • To display a single-level hierarchy.
  • If a table would be too complex.

Don't

Don’t use the list:

  • To manage complex datasets. In this case, use a table.
  • If you work with complex hierarchies. In this case, use a tree.

Anatomy

List

  1. Header: The first item of the list serves as a header. The header contains the title of the list.
  2. Footer: If the footer element is used, the footer is the last item in the list.
  3. Separator: The list item separators are customizable.

Anatomy of a list

Anatomy of a list

Standard List Item

The standard list item is the simplest type of list item. It provides elements for the most common use cases, such as image, text, and icon.

  1. Image
  2. Text
  3. Icon / additional text:
    a. Icon: You can use the iconEnd property to place an icon at the end of an item.
    b. Additional text: You can use the additionalText property to display an additional text at the end of a row. The additionalTextState property applies a semantic state to this text.

Anatomy of a standard list item

Anatomy of a standard list item

Custom List Item

You can use the custom list item component within the list in the same way as a standard list item. The custom list item component accepts arbitrary HTML content to allow full customization.

Anatomy of a custom list item

Anatomy of a custom list item

Group Header List Item

The group header list item is a special list item, used only to separate other list items into logical groups.

Anatomy of a group header list item

Anatomy of a group header list item

Types

The following list variants are available to support different use cases:

List Structure

Standard list

Growing list

List with image content

List item separators

List with group headers

Processing Modes

Single selection mode

Multiple selection mode

Delete mode

List Status

Busy

No data

Standard List

Use this variant as a starting point.

https://www.sap.com/design-system/live-examples/List/List_LE_Behavior_Standard_List.html

Standard list – live example

Growing List (Scroll)

Use this variant if there are too many list items to show in the visible space. You can display a More button or let the user scroll within the list to show more items. By default, growing is switched off.

https://www.sap.com/design-system/live-examples/List/List_LE_Variant_Growing.html

Growing list with scrollbar – live example

List with Image Content

You can use the imageContent slot to add an image or avatar to the item.

https://www.sap.com/design-system/live-examples/List/List_SE_Variant_Image_Content.html

List items using the image content slot to display avatars

List Item Separators

By default, horizontal separators are displayed between all list items. Alternatively, you can remove all separators, only show separators between items (inner separators).

https://www.sap.com/design-system/live-examples/List/List_SE_Variant_Separation_Types.html

List item separation types

List with Group Headers

Use this variant if you want to group items in the list.

https://www.sap.com/design-system/live-examples/List/List_SE_Variant_Group_Headers.html

List with group headers

Single Selection Mode

Allows users to select only one item at a time.

https://www.sap.com/design-system/live-examples/List/List_LE_Behavior_Single_Selection.html

Single selection mode – live example

Multiple Selection Mode

Allows users select more than one item at once using the checkboxes on the left.

https://www.sap.com/design-system/live-examples/List/List_LE_Behavior_Multi_Selection.html

Multiple selection mode – live example

Delete Mode

Use this variant to show an icon for deleting or removing an item.

https://www.sap.com/design-system/live-examples/List/List_LE_Behavior_Delete_Mode.html

Delete mode with ‘X’ icon – live example

Busy List

Use this variant to indicate that the list is fetching data.

https://www.sap.com/design-system/live-examples/List/List_LE_Variant_Busy.html

Busy list – live example

List with No Data

Use this variant to show a text when the list is empty.

https://www.sap.com/design-system/live-examples/List/List_SE_Variant_No_Data.html

List with no data

Behavior and Interaction

See the examples for the following variants:

Responsive Behavior

Wrapping and Truncation

By default, texts in a list item are truncated if there isn’t enough space.

https://www.sap.com/design-system/live-examples/List/List_SE_Long%20Texts_Truncation.html

List item with long title, description, and additional text

https://www.sap.com/design-system/live-examples/List/List_SE_Long%20Texts_Truncation.html

List item with truncated text

Components

Implementation

  • List
    (UI5 Web Components documentation)

Specifications

  • List (visual design)
  • List (interaction design)

Components

Implementation

  • List
    (UI5 Web Components documentation)