Skip to main content

SearchItem

<ui5-search-item> | Since 2.9.0
info

The following entity is available under an experimental flag and its API and behavior are subject to change.

A ui5-search-item is a list item, used for displaying search suggestions

ES6 Module Import​

import "@ui5/webcomponents-fiori/dist/SearchItem.js";

Properties​

text​

DescriptionDefines the heading text of the search item.
Typestring | undefined
Defaultundefined

description​

DescriptionDefines the description that appears right under the item text, if available.
Typestring | undefined
Defaultundefined
Since2.12.0

icon​

DescriptionDefines the icon name of the search item. Note: If provided, the image slot will be ignored.
Typestring | undefined
Defaultundefined

selected​

DescriptionDefines whether the search item is selected.
Typeboolean
Defaultfalse

deletable​

DescriptionDefines whether the search item is deletable.
Typeboolean
Defaultfalse

scopeName​

DescriptionDefines the scope of the search item
Typestring | undefined
Defaultundefined

Slots​

image​

DescriptionNote: While the slot allows the option of setting a custom avatar, to comply with the design guidelines, use the ui5-avatar with size - XS.
TypeArray<HTMLElement>
Since2.12.0

actions​

DescriptionDefines the actionable elements. This slot allows placing additional interactive elements (such as buttons, icons, or tags) next to the delete button, providing flexible customization for various user actions.
Note: While the slot is flexible, for consistency with design guidelines, it's recommended to use ui5-button with Transparent design or ui5-icon elements.
TypeArray<HTMLElement>
Since2.16.0

Events​

delete​

DescriptionFired when delete button is pressed.
TypeCustomEvent
BubblesNo
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

CSS Custom States​

No CSS custom states available for this component.