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.

List – live example

When to Use

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

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.

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.

Group Header List Item

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

Variants

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.

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.

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.

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

List item separation types

List with Group Headers

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

List with group headers

Single Selection Mode

Allows users to select only one item at a time.

Single selection mode – live example

Multiple Selection Mode

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

Multiple selection mode – live example

Delete Mode

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

Delete mode with ‘X’ icon – live example

Busy List

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

Busy list – live example

List with No Data

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

List with no data

Behavior and Interaction

See the examples for the following variants:

• Standard list
• Single selection mode
• Multiple selection mode

Responsive Behavior

Wrapping and Truncation

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

List item with long title, description, and additional text

List item with truncated text

Related Links