;
+
+ get _effectiveTabIndex() {
+ return -1;
+ }
+}
+
+ComboBoxItemCustom.define();
+
+export default ComboBoxItemCustom;
diff --git a/packages/main/src/ComboBoxItemCustomTemplate.tsx b/packages/main/src/ComboBoxItemCustomTemplate.tsx
new file mode 100644
index 000000000000..5c8e2999889c
--- /dev/null
+++ b/packages/main/src/ComboBoxItemCustomTemplate.tsx
@@ -0,0 +1,10 @@
+import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
+import type ComboBoxItemCustom from "./ComboBoxItemCustom.js";
+
+export default function ComboBoxItemCustomTemplate(this: ComboBoxItemCustom) {
+ return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option" });
+}
+
+function listItemContent(this: ComboBoxItemCustom) {
+ return ;
+}
diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
index 085142308936..e0e250a8421b 100644
--- a/packages/main/src/MultiComboBox.ts
+++ b/packages/main/src/MultiComboBox.ts
@@ -59,6 +59,7 @@ import arraysAreEqual from "@ui5/webcomponents-base/dist/util/arraysAreEqual.js"
import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
import MultiComboBoxItem, { isInstanceOfMultiComboBoxItem } from "./MultiComboBoxItem.js";
+import "./MultiComboBoxItemCustom.js";
import MultiComboBoxItemGroup, { isInstanceOfMultiComboBoxItemGroup } from "./MultiComboBoxItemGroup.js";
import ListItemGroup from "./ListItemGroup.js";
import Tokenizer, { getTokensCountText } from "./Tokenizer.js";
diff --git a/packages/main/src/MultiComboBoxItemCustom.ts b/packages/main/src/MultiComboBoxItemCustom.ts
new file mode 100644
index 000000000000..eced507096f6
--- /dev/null
+++ b/packages/main/src/MultiComboBoxItemCustom.ts
@@ -0,0 +1,90 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import {
+ property,
+ eventStrict as event,
+} from "@ui5/webcomponents-base/dist/decorators.js";
+import ComboBoxItemCustom from "./ComboBoxItemCustom.js";
+import CheckBox from "./CheckBox.js";
+import type { IMultiComboBoxItem } from "./MultiComboBox.js";
+import {
+ ARIA_LABEL_LIST_ITEM_CHECKBOX,
+} from "./generated/i18n/i18n-defaults.js";
+import styles from "./generated/themes/MultiComboBoxItemCustom.css.js";
+import MultiComboBoxItemCustomTemplate from "./MultiComboBoxItemCustomTemplate.js";
+import type { SelectionRequestEventDetail } from "./ListItem.js";
+import type { AriaRole } from "@ui5/webcomponents-base";
+
+/**
+ * @class
+ * The `ui5-mcbi-custom` is type of multi-combobox item,
+ * that can be used to place multi-combobox items with custom content.
+ * The text property is considered for filtering and token display.
+ * In case the user needs highlighting functionality, check "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js"
+ *
+ * @constructor
+ * @extends ComboBoxItemCustom
+ * @implements {IMultiComboBoxItem}
+ * @public
+ * @since 2.24.0
+ */
+@customElement({
+ tag: "ui5-mcbi-custom",
+ template: MultiComboBoxItemCustomTemplate,
+ styles: [ComboBoxItemCustom.styles, styles],
+ dependencies: [...ComboBoxItemCustom.dependencies, CheckBox],
+})
+
+@event("selection-requested", {
+ bubbles: true,
+})
+class MultiComboBoxItemCustom extends ComboBoxItemCustom implements IMultiComboBoxItem {
+ eventDetails!: ComboBoxItemCustom["eventDetails"] & {
+ "selection-requested": SelectionRequestEventDetail,
+ }
+
+ /**
+ * Defines the selected state of the component.
+ * @default false
+ * @public
+ * @deprecated Set the `value` property on items and use the `selectedValues` property on the parent `ui5-multi-combobox` instead for programmatic selection.
+ */
+ @property({ type: Boolean })
+ selected = false;
+
+ /**
+ * @private
+ */
+ @property({ type: Boolean, noAttribute: true })
+ _readonly = false;
+
+ @i18n("@ui5/webcomponents")
+ static i18nBundle: I18nBundle;
+
+ get isMultiComboBoxItem() {
+ return true;
+ }
+
+ _onclick(e: MouseEvent) {
+ if ((e.target as HTMLElement)?.hasAttribute("ui5-checkbox")) {
+ return this.fireDecoratorEvent("selection-requested", { item: this, selected: (e.target as CheckBox).checked, selectionComponentPressed: true });
+ }
+
+ super._onclick(e);
+ }
+
+ get _accessibleName() {
+ return MultiComboBoxItemCustom.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX);
+ }
+
+ get checkBoxAccInfo() {
+ return {
+ role: "presentation" as AriaRole,
+ };
+ }
+}
+
+MultiComboBoxItemCustom.define();
+
+export default MultiComboBoxItemCustom;
diff --git a/packages/main/src/MultiComboBoxItemCustomTemplate.tsx b/packages/main/src/MultiComboBoxItemCustomTemplate.tsx
new file mode 100644
index 000000000000..f6acf5bd381c
--- /dev/null
+++ b/packages/main/src/MultiComboBoxItemCustomTemplate.tsx
@@ -0,0 +1,22 @@
+import CheckBox from "./CheckBox.js";
+import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
+import type MultiComboBoxItemCustom from "./MultiComboBoxItemCustom.js";
+
+export default function MultiComboBoxItemCustomTemplate(this: MultiComboBoxItemCustom) {
+ return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option" });
+}
+
+function listItemContent(this: MultiComboBoxItemCustom) {
+ return (
+ <>
+
+
+
+
+
+ );
+}
diff --git a/packages/main/src/bundle.esm.ts b/packages/main/src/bundle.esm.ts
index f770e818a792..d916b641dfac 100644
--- a/packages/main/src/bundle.esm.ts
+++ b/packages/main/src/bundle.esm.ts
@@ -47,6 +47,7 @@ import ColorPaletteItem from "./ColorPaletteItem.js";
import ColorPalettePopover from "./ColorPalettePopover.js";
import ColorPicker from "./ColorPicker.js";
import ComboBox from "./ComboBox.js";
+import ComboBoxItemCustom from "./ComboBoxItemCustom.js";
import DatePicker from "./DatePicker.js";
import DateRangePicker from "./DateRangePicker.js";
import DateTimePicker from "./DateTimePicker.js";
@@ -109,6 +110,7 @@ import RangeSlider from "./RangeSlider.js";
import Switch from "./Switch.js";
import MessageStrip from "./MessageStrip.js";
import MultiComboBox from "./MultiComboBox.js";
+import MultiComboBoxItemCustom from "./MultiComboBoxItemCustom.js";
import ProgressIndicator from "./ProgressIndicator.js";
import RatingIndicator from "./RatingIndicator.js";
import Tag from "./Tag.js";
diff --git a/packages/main/src/themes/ComboBoxItemCustom.css b/packages/main/src/themes/ComboBoxItemCustom.css
new file mode 100644
index 000000000000..06466771c5e8
--- /dev/null
+++ b/packages/main/src/themes/ComboBoxItemCustom.css
@@ -0,0 +1,14 @@
+:host([ui5-cbi-custom]) {
+ height: auto;
+ min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-cbi-custom]) .ui5-li-root {
+ min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-cbi-custom]) .ui5-li-content {
+ padding-bottom: .5rem;
+ padding-top: .5rem;
+ box-sizing: border-box;
+}
diff --git a/packages/main/src/themes/MultiComboBoxItemCustom.css b/packages/main/src/themes/MultiComboBoxItemCustom.css
new file mode 100644
index 000000000000..7e6eb383c5ad
--- /dev/null
+++ b/packages/main/src/themes/MultiComboBoxItemCustom.css
@@ -0,0 +1,19 @@
+:host([ui5-mcbi-custom]) {
+ height: auto;
+ min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-mcbi-custom]) .ui5-li-root {
+ padding-inline-start: 0;
+ min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-mcbi-custom]) .ui5-li-content {
+ padding-bottom: .5rem;
+ padding-top: .5rem;
+ box-sizing: border-box;
+}
+
+:host([ui5-mcbi-custom]) [ui5-checkbox] {
+ overflow: visible;
+}
diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html
index 0d2e49ee54cf..e655361591a8 100644
--- a/packages/main/test/pages/ComboBox.html
+++ b/packages/main/test/pages/ComboBox.html
@@ -671,6 +671,59 @@ Dialog Header Title from Label
+
+
ComboBox with Custom Items
+ Custom items with icons/emojis:
+
+
+
+
+ 🇩🇪Germany
+
+
+ 🇫🇷France
+
+
+ 🇪🇸Spain
+
+
+ 🇮🇹Italy
+
+
+ 🇬🇧United Kingdom
+
+
+
+ Selected value:
+
+ Selected selectedValue:
+
+
+
+
+
+
ComboBox with Mixed Items
+ Regular items mixed with custom items:
+
+
+
+
+
+ ⭐ Custom Item with Icon
+
+
+
+ 🔷 Another Custom Item
+
+
+
+