Skip to main content

ListItemStandard

<ui5-li>

The ui5-li represents the simplest type of item for a ui5-list.

This is a list item, providing the most common use cases such as text, image and icon.

Properties​

text​

DescriptionDefines the text of the component.
Typestring | undefined
Defaultundefined
Since2.10.0

description​

DescriptionDefines the description displayed right under the item text, if such is present.
Typestring | undefined
Defaultundefined
Since0.8.0

icon​

DescriptionDefines the icon source URI.
Note: SAP-icons font provides numerous built-in icons. To find all the available icons, see the Icon Explorer.
Typestring | undefined
Defaultundefined

iconEnd​

DescriptionDefines whether the icon should be displayed in the beginning of the list item or in the end.
Typeboolean
Defaultfalse

additionalText​

DescriptionDefines the additionalText, displayed in the end of the list item.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.15

additionalTextState​

DescriptionDefines the state of the additionalText.
Available options are: "None" (by default), "Positive", "Critical", "Information" and "Negative".
Type"None" | "Positive" | "Critical" | "Negative" | "Information"
Default"None"
Since1.0.0-rc.15

movable​

DescriptionDefines whether the item is movable.
Typeboolean
Defaultfalse
Since2.0.0

accessibleName​

DescriptionDefines the text alternative of the component. Note: If not provided a default text alternative will be set, if present.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.15

wrappingType​

DescriptionDefines if the text of the component should wrap when it's too long. When set to "Normal", the content (title, description) will be wrapped using the ui5-expandable-text component.

The text can wrap up to 100 characters on small screens (size S) and up to 300 characters on larger screens (size M and above). When text exceeds these limits, it truncates with an ellipsis followed by a text expansion trigger.
Available options are:
- None (default) - The text will truncate with an ellipsis.
- Normal - The text will wrap (without truncation).
Type"None" | "Normal"
Default"None"
Since2.10.0

type​

DescriptionDefines the visual indication and behavior of the list items. Available options are Active (by default), Inactive, Detail and Navigation.
Note: When set to Active or Navigation, the item will provide visual response upon press and hover, while with type Inactive and Detail - will not.
Type"Inactive" | "Active" | "Detail" | "Navigation"
Default"Active"

accessibilityAttributes​

DescriptionDefines the additional accessibility attributes that will be applied to the component. The following fields are supported:
- ariaSetsize: Defines the number of items in the current set when not all items in the set are present in the DOM. Note: The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set -1.
- ariaPosinset: Defines an element's number or position in the current set when not all items are present in the DOM. Note: The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.
TypeListItemAccessibilityAttributes
Default{}
Since1.15.0
DescriptionThe navigated state of the list item. If set to true, a navigation indicator is displayed at the end of the list item.
Typeboolean
Defaultfalse
Since1.10.0

tooltip​

DescriptionDefines the text of the tooltip that would be displayed for the list item.
Typestring | undefined
Defaultundefined
Since1.23.0

highlight​

DescriptionDefines the highlight state of the list items. Available options are: "None" (by default), "Positive", "Critical", "Information" and "Negative".
Type"None" | "Positive" | "Critical" | "Negative" | "Information"
Default"None"
Since1.24

selected​

DescriptionDefines the selected state of the component.
Typeboolean
Defaultfalse

Slots​

default​

DescriptionDefines the custom formatted text of the component.
Note: For optimal text wrapping and a consistent layout, it is strongly recommended to use the text property.
Use the default slot only when custom formatting with HTML elements (e.g., <b>, <i>) is required. Be aware that wrapping (via wrappingType="Normal") may not function correctly with custom HTML content in the default slot.
If both text and default slot are used, the text property takes precedence.
TypeArray<Node>

image​

DescriptionNote: While the slot allows option for setting custom avatar, to match the design guidelines, please use the ui5-avatar with it's default size - S.
Note: If bigger ui5-avatar needs to be used, then the size of the ui5-li should be customized in order to fit.
TypeArray<HTMLElement>
Since2.0.0

deleteButton​

DescriptionDefines the delete button, displayed in "Delete" mode. Note: While the slot allows custom buttons, to match design guidelines, please use the ui5-button component. Note: When the slot is not present, a built-in delete button will be displayed.
TypeArray<IButton>
Since1.9.0

Events​

detail-click​

DescriptionFired when the user clicks on the detail button when type is Detail.
TypeCustomEvent
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

NameDescription
titleUsed to style the title of the list item
descriptionUsed to style the description of the list item
additional-textUsed to style the additionalText of the list item
iconUsed to style the icon of the list item
native-liUsed to style the main li tag of the list item
contentUsed to style the content area of the list item
detail-buttonUsed to style the button rendered when the list item is of type detail
delete-buttonUsed to style the button rendered when the list item is in delete mode
radioUsed to style the radio button rendered when the list item is in single selection mode
checkboxUsed to style the checkbox rendered when the list item is in multiple selection mode