From 8a60ed6ac997a29fc55ecc4d99bc90d23e30e80e Mon Sep 17 00:00:00 2001
From: Artur Signell <artur@vaadin.com>
Date: Mon, 25 Aug 2025 16:16:54 +0300
Subject: [PATCH 1/4] feat: add itemLabelGenerator property to select,
 combo-box and multi-select-combo-box
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement itemLabelGenerator function property that allows custom label generation for items.
The generator function receives an item and returns a string label, taking precedence over
itemLabelPath when both are defined.

- Add itemLabelGenerator to vaadin-select for custom dropdown item labels
- Add itemLabelGenerator to vaadin-combo-box with support for filtering by generated labels
- Multi-select-combo-box inherits itemLabelGenerator for both dropdown and chip labels
- Add comprehensive tests for all three components
- Update dev examples to demonstrate the new feature

Fixes #8333

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 dev/combo-box.html                            |  58 +++++--
 dev/multi-select-combo-box.html               |  28 +++
 dev/select.html                               |  14 ++
 .../src/vaadin-combo-box-items-mixin.js       |  24 +++
 .../test/item-label-generator.test.js         | 122 +++++++++++++
 .../test/item-label-generator.test.js         | 164 ++++++++++++++++++
 .../select/src/vaadin-select-base-mixin.js    |  46 ++++-
 .../select/test/item-label-generator.test.js  | 103 +++++++++++
 8 files changed, 535 insertions(+), 24 deletions(-)
 create mode 100644 packages/combo-box/test/item-label-generator.test.js
 create mode 100644 packages/multi-select-combo-box/test/item-label-generator.test.js
 create mode 100644 packages/select/test/item-label-generator.test.js

diff --git a/dev/combo-box.html b/dev/combo-box.html
index 8c63443ad3d..fff07487fa0 100644
--- a/dev/combo-box.html
+++ b/dev/combo-box.html
@@ -34,6 +34,16 @@ <h2 class="heading">Bells & Whistles</h2>
       </vaadin-combo-box>
     </section>
 
+    <section class="section">
+      <h2 class="heading">Item Label Generator</h2>
+      <vaadin-combo-box 
+        id="label-generator"
+        label="Select product"
+        helper-text="Products with custom label formatting"
+        clear-button-visible
+      ></vaadin-combo-box>
+    </section>
+
     <section class="section">
       <h2 class="heading">States</h2>
       <vaadin-combo-box
@@ -61,22 +71,40 @@ <h2 class="heading">States</h2>
 
     <script type="module">
       document.querySelectorAll('vaadin-combo-box').forEach((comboBox) => {
-        comboBox.dataProvider = async (params, callback) => {
-          const index = params.page * params.pageSize;
-          const response = await fetch(
-            `https://demo.vaadin.com/demo-data/1.0/filtered-countries?index=${index}&count=${params.pageSize}&filter=${params.filter}`,
-          );
-          if (response.ok) {
-            const { result, size } = await response.json();
-            // Emulate network latency for demo purpose
-            setTimeout(() => {
-              callback(result, size);
-            }, 1000);
-          }
-        };
+        if (comboBox.id === 'label-generator') {
+          // Example with itemLabelGenerator
+          comboBox.items = [
+            { id: 'p1', name: 'Laptop', category: 'Electronics', price: 999.99, inStock: true },
+            { id: 'p2', name: 'Mouse', category: 'Electronics', price: 29.99, inStock: true },
+            { id: 'p3', name: 'Keyboard', category: 'Electronics', price: 79.99, inStock: false },
+            { id: 'p4', name: 'Monitor', category: 'Electronics', price: 399.99, inStock: true },
+            { id: 'p5', name: 'Desk Chair', category: 'Furniture', price: 249.99, inStock: true },
+            { id: 'p6', name: 'Standing Desk', category: 'Furniture', price: 599.99, inStock: false },
+          ];
+          comboBox.itemValuePath = 'id';
+          comboBox.itemLabelGenerator = (item) => {
+            const stockStatus = item.inStock ? '✅' : '❌';
+            return `${item.name} - $${item.price} ${stockStatus}`;
+          };
+          comboBox.value = 'p1';
+        } else {
+          comboBox.dataProvider = async (params, callback) => {
+            const index = params.page * params.pageSize;
+            const response = await fetch(
+              `https://demo.vaadin.com/demo-data/1.0/filtered-countries?index=${index}&count=${params.pageSize}&filter=${params.filter}`,
+            );
+            if (response.ok) {
+              const { result, size } = await response.json();
+              // Emulate network latency for demo purpose
+              setTimeout(() => {
+                callback(result, size);
+              }, 1000);
+            }
+          };
 
-        if (!comboBox.placeholder) {
-          comboBox.selectedItem = 'Andorra';
+          if (!comboBox.placeholder) {
+            comboBox.selectedItem = 'Andorra';
+          }
         }
       });
     </script>
diff --git a/dev/multi-select-combo-box.html b/dev/multi-select-combo-box.html
index 403922aa746..8f72830fbcd 100644
--- a/dev/multi-select-combo-box.html
+++ b/dev/multi-select-combo-box.html
@@ -84,6 +84,15 @@
       </vaadin-multi-select-combo-box>
     </div>
 
+    <div style="margin-top: 2rem;">
+      <h3>Object items with itemLabelGenerator</h3>
+      <vaadin-multi-select-combo-box
+        id="object-items"
+        label="Select team members"
+        placeholder="Search team members..."
+      ></vaadin-multi-select-combo-box>
+    </div>
+
     <script>
       const comboBox = document.querySelector('vaadin-multi-select-combo-box');
 
@@ -152,6 +161,25 @@
         comboBox.setAttribute('dir', e.detail.value);
       });
 
+      // Setup object items example with itemLabelGenerator
+      const objectItemsComboBox = document.getElementById('object-items');
+      objectItemsComboBox.items = [
+        { id: 1, firstName: 'John', lastName: 'Doe', department: 'Engineering', role: 'Senior Developer' },
+        { id: 2, firstName: 'Jane', lastName: 'Smith', department: 'Design', role: 'UX Designer' },
+        { id: 3, firstName: 'Bob', lastName: 'Johnson', department: 'Engineering', role: 'DevOps Engineer' },
+        { id: 4, firstName: 'Alice', lastName: 'Williams', department: 'Product', role: 'Product Manager' },
+        { id: 5, firstName: 'Charlie', lastName: 'Brown', department: 'Engineering', role: 'Junior Developer' },
+        { id: 6, firstName: 'Diana', lastName: 'Prince', department: 'Design', role: 'UI Designer' },
+        { id: 7, firstName: 'Edward', lastName: 'Norton', department: 'Sales', role: 'Account Executive' },
+        { id: 8, firstName: 'Fiona', lastName: 'Green', department: 'Marketing', role: 'Marketing Manager' },
+      ];
+      objectItemsComboBox.itemIdPath = 'id';
+      objectItemsComboBox.itemLabelGenerator = (item) => `${item.firstName} ${item.lastName} (${item.department} - ${item.role})`;
+      objectItemsComboBox.selectedItems = [
+        objectItemsComboBox.items[0],
+        objectItemsComboBox.items[2],
+      ];
+
       // Event listeners for changes
       comboBox.addEventListener('custom-value-set', (event) => {
         const item = event.detail;
diff --git a/dev/select.html b/dev/select.html
index 5a3e6266f3b..54c2dfc047d 100644
--- a/dev/select.html
+++ b/dev/select.html
@@ -39,6 +39,11 @@ <h2 class="heading">Custom renderer</h2>
       <vaadin-select id="custom" value="s"></vaadin-select>
     </section>
 
+    <section class="section">
+      <h2 class="heading">Item Label Generator</h2>
+      <vaadin-select id="label-generator" label="Select user" value="2"></vaadin-select>
+    </section>
+
     <section class="section">
       <h2 class="heading">States</h2>
       <vaadin-select
@@ -85,6 +90,15 @@ <h2 class="heading">States</h2>
               root,
             );
           };
+        } else if (select.id === 'label-generator') {
+          // Example with itemLabelGenerator
+          select.items = [
+            { value: '1', firstName: 'John', lastName: 'Doe', role: 'Admin' },
+            { value: '2', firstName: 'Jane', lastName: 'Smith', role: 'User' },
+            { value: '3', firstName: 'Bob', lastName: 'Johnson', role: 'Manager' },
+            { value: '4', firstName: 'Alice', lastName: 'Williams', role: 'User' },
+          ];
+          select.itemLabelGenerator = (item) => `${item.firstName} ${item.lastName} (${item.role})`;
         } else {
           select.items = [
             { label: 'Show all', value: 'all' },
diff --git a/packages/combo-box/src/vaadin-combo-box-items-mixin.js b/packages/combo-box/src/vaadin-combo-box-items-mixin.js
index 2bbc39e2f55..180ae89f1e4 100644
--- a/packages/combo-box/src/vaadin-combo-box-items-mixin.js
+++ b/packages/combo-box/src/vaadin-combo-box-items-mixin.js
@@ -109,6 +109,18 @@ export const ComboBoxItemsMixin = (superClass) =>
           value: 'value',
           sync: true,
         },
+
+        /**
+         * Function that is used to generate the label for each item.
+         * Receives one argument:
+         * - `item` The item to generate the label for.
+         *
+         * @type {(item: ComboBoxItem) => string}
+         */
+        itemLabelGenerator: {
+          type: Function,
+          observer: '_itemLabelGeneratorChanged',
+        },
       };
     }
 
@@ -161,6 +173,11 @@ export const ComboBoxItemsMixin = (superClass) =>
      * @override
      */
     _getItemLabel(item) {
+      // Use itemLabelGenerator if available
+      if (this.itemLabelGenerator && item) {
+        return this.itemLabelGenerator(item) || '';
+      }
+
       let label = item && this.itemLabelPath ? get(this.itemLabelPath, item) : undefined;
       if (label === undefined || label === null) {
         label = item ? item.toString() : '';
@@ -184,6 +201,13 @@ export const ComboBoxItemsMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    _itemLabelGeneratorChanged() {
+      if (this._scroller) {
+        this._scroller.requestContentUpdate();
+      }
+    }
+
     /** @private */
     _filterChanged(filter) {
       // Scroll to the top of the list whenever the filter changes.
diff --git a/packages/combo-box/test/item-label-generator.test.js b/packages/combo-box/test/item-label-generator.test.js
new file mode 100644
index 00000000000..2b0b26475a7
--- /dev/null
+++ b/packages/combo-box/test/item-label-generator.test.js
@@ -0,0 +1,122 @@
+import { expect } from '@vaadin/chai-plugins';
+import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import '../vaadin-combo-box.js';
+import { setInputValue } from './helpers.js';
+
+describe('item-label-generator', () => {
+  let comboBox;
+
+  beforeEach(async () => {
+    comboBox = fixtureSync('<vaadin-combo-box></vaadin-combo-box>');
+    await nextRender();
+  });
+
+  describe('basic functionality', () => {
+    beforeEach(() => {
+      comboBox.items = [
+        { id: 1, name: 'John', surname: 'Doe', age: 30 },
+        { id: 2, name: 'Jane', surname: 'Smith', age: 25 },
+        { id: 3, name: 'Bob', surname: 'Johnson', age: 35 },
+        { id: 4, name: 'Alice', surname: 'Williams', age: 28 },
+      ];
+    });
+
+    it('should generate labels using itemLabelGenerator', async () => {
+      comboBox.itemLabelGenerator = (item) => `${item.name} ${item.surname}`;
+      comboBox.opened = true;
+      await nextRender();
+
+      const items = comboBox._scroller.querySelectorAll('vaadin-combo-box-item');
+      expect(items[0].textContent).to.equal('John Doe');
+      expect(items[1].textContent).to.equal('Jane Smith');
+      expect(items[2].textContent).to.equal('Bob Johnson');
+      expect(items[3].textContent).to.equal('Alice Williams');
+    });
+
+    it('should display generated label in input when item is selected', async () => {
+      comboBox.itemLabelGenerator = (item) => `${item.name} ${item.surname} (${item.age})`;
+      comboBox.itemValuePath = 'id';
+      comboBox.value = 2;
+      await nextRender();
+
+      expect(comboBox.inputElement.value).to.equal('Jane Smith (25)');
+    });
+
+    it('should filter items using generated labels', () => {
+      comboBox.itemLabelGenerator = (item) => `${item.name} ${item.surname}`;
+
+      setInputValue(comboBox, 'john');
+
+      expect(comboBox.filteredItems.length).to.equal(2);
+      expect(comboBox.filteredItems[0]).to.deep.equal({ id: 1, name: 'John', surname: 'Doe', age: 30 });
+      expect(comboBox.filteredItems[1]).to.deep.equal({ id: 3, name: 'Bob', surname: 'Johnson', age: 35 });
+    });
+
+    it('should use itemLabelGenerator over itemLabelPath', async () => {
+      comboBox.items = [
+        { id: 1, label: 'Label from path', customLabel: 'Custom Label 1' },
+        { id: 2, label: 'Another label', customLabel: 'Custom Label 2' },
+      ];
+      comboBox.itemLabelPath = 'label';
+      comboBox.itemLabelGenerator = (item) => item.customLabel;
+      comboBox.opened = true;
+      await nextRender();
+
+      const items = comboBox._scroller.querySelectorAll('vaadin-combo-box-item');
+      expect(items[0].textContent).to.equal('Custom Label 1');
+      expect(items[1].textContent).to.equal('Custom Label 2');
+    });
+
+    it('should handle empty return from itemLabelGenerator', async () => {
+      comboBox.itemLabelGenerator = (item) => {
+        if (item.id === 2) {
+          return '';
+        }
+        return `${item.name} ${item.surname}`;
+      };
+      comboBox.opened = true;
+      await nextRender();
+
+      const items = comboBox._scroller.querySelectorAll('vaadin-combo-box-item');
+      expect(items[0].textContent).to.equal('John Doe');
+      expect(items[1].textContent).to.equal('');
+      expect(items[2].textContent).to.equal('Bob Johnson');
+    });
+
+    it('should update dropdown when itemLabelGenerator changes', async () => {
+      comboBox.itemLabelGenerator = (item) => item.name;
+      comboBox.opened = true;
+      await nextRender();
+
+      let items = comboBox._scroller.querySelectorAll('vaadin-combo-box-item');
+      expect(items[0].textContent).to.equal('John');
+
+      comboBox.itemLabelGenerator = (item) => `${item.name} (${item.age})`;
+      await nextRender();
+
+      items = comboBox._scroller.querySelectorAll('vaadin-combo-box-item');
+      expect(items[0].textContent).to.equal('John (30)');
+    });
+
+    it('should work with string items when itemLabelGenerator is not set', async () => {
+      comboBox.items = ['Apple', 'Banana', 'Orange'];
+      comboBox.opened = true;
+      await nextRender();
+
+      const items = comboBox._scroller.querySelectorAll('vaadin-combo-box-item');
+      expect(items[0].textContent).to.equal('Apple');
+      expect(items[1].textContent).to.equal('Banana');
+      expect(items[2].textContent).to.equal('Orange');
+    });
+
+    it('should find items by generated label when typing', () => {
+      comboBox.itemLabelGenerator = (item) => `${item.surname}, ${item.name}`;
+      comboBox.itemValuePath = 'id';
+
+      setInputValue(comboBox, 'Smith, Jane');
+
+      expect(comboBox.filteredItems.length).to.equal(1);
+      expect(comboBox.filteredItems[0]).to.deep.equal({ id: 2, name: 'Jane', surname: 'Smith', age: 25 });
+    });
+  });
+});
diff --git a/packages/multi-select-combo-box/test/item-label-generator.test.js b/packages/multi-select-combo-box/test/item-label-generator.test.js
new file mode 100644
index 00000000000..d8b195e0a11
--- /dev/null
+++ b/packages/multi-select-combo-box/test/item-label-generator.test.js
@@ -0,0 +1,164 @@
+import { expect } from '@vaadin/chai-plugins';
+import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import '../vaadin-multi-select-combo-box.js';
+import { setInputValue } from '@vaadin/combo-box/test/helpers.js';
+
+describe('item-label-generator', () => {
+  let comboBox;
+
+  beforeEach(async () => {
+    comboBox = fixtureSync('<vaadin-multi-select-combo-box></vaadin-multi-select-combo-box>');
+    await nextRender();
+  });
+
+  describe('basic functionality', () => {
+    beforeEach(() => {
+      comboBox.items = [
+        { id: 1, name: 'John', surname: 'Doe', age: 30 },
+        { id: 2, name: 'Jane', surname: 'Smith', age: 25 },
+        { id: 3, name: 'Bob', surname: 'Johnson', age: 35 },
+        { id: 4, name: 'Alice', surname: 'Williams', age: 28 },
+      ];
+    });
+
+    it('should generate labels using itemLabelGenerator in dropdown', async () => {
+      comboBox.itemLabelGenerator = (item) => `${item.name} ${item.surname}`;
+      comboBox.opened = true;
+      await nextRender();
+
+      const items = comboBox._scroller.querySelectorAll('vaadin-multi-select-combo-box-item');
+      expect(items[0].textContent).to.equal('John Doe');
+      expect(items[1].textContent).to.equal('Jane Smith');
+      expect(items[2].textContent).to.equal('Bob Johnson');
+      expect(items[3].textContent).to.equal('Alice Williams');
+    });
+
+    it('should display generated labels in chips', async () => {
+      comboBox.itemLabelGenerator = (item) => `${item.name} ${item.surname}`;
+      comboBox.itemIdPath = 'id';
+      await nextRender();
+
+      comboBox.selectedItems = [
+        { id: 1, name: 'John', surname: 'Doe', age: 30 },
+        { id: 2, name: 'Jane', surname: 'Smith', age: 25 },
+      ];
+      await nextRender();
+
+      const chips = comboBox.querySelectorAll('vaadin-multi-select-combo-box-chip[slot="chip"]');
+      expect(chips.length).to.equal(2);
+      expect(chips[0].label).to.equal('John Doe');
+      expect(chips[1].label).to.equal('Jane Smith');
+    });
+
+    it('should filter items using generated labels', () => {
+      comboBox.itemLabelGenerator = (item) => `${item.name} ${item.surname}`;
+
+      setInputValue(comboBox, 'john');
+
+      expect(comboBox.filteredItems.length).to.equal(2);
+      expect(comboBox.filteredItems[0]).to.deep.equal({ id: 1, name: 'John', surname: 'Doe', age: 30 });
+      expect(comboBox.filteredItems[1]).to.deep.equal({ id: 3, name: 'Bob', surname: 'Johnson', age: 35 });
+    });
+
+    it('should use itemLabelGenerator over itemLabelPath', async () => {
+      comboBox.items = [
+        { id: 1, label: 'Label from path', customLabel: 'Custom Label 1' },
+        { id: 2, label: 'Another label', customLabel: 'Custom Label 2' },
+      ];
+      comboBox.itemLabelPath = 'label';
+      comboBox.itemLabelGenerator = (item) => item.customLabel;
+      comboBox.itemIdPath = 'id';
+      comboBox.selectedItems = [{ id: 1, label: 'Label from path', customLabel: 'Custom Label 1' }];
+      await nextRender();
+
+      const chip = comboBox.querySelector('vaadin-multi-select-combo-box-chip[slot="chip"]');
+      expect(chip.label).to.equal('Custom Label 1');
+    });
+
+    it('should handle complex label generation for chips', async () => {
+      comboBox.itemLabelGenerator = (item) => `${item.surname}, ${item.name} (${item.age})`;
+      comboBox.itemIdPath = 'id';
+      await nextRender();
+
+      comboBox.selectedItems = [
+        { id: 1, name: 'John', surname: 'Doe', age: 30 },
+        { id: 3, name: 'Bob', surname: 'Johnson', age: 35 },
+      ];
+      await nextRender();
+
+      const chips = comboBox.querySelectorAll('vaadin-multi-select-combo-box-chip[slot="chip"]');
+      expect(chips.length).to.equal(2);
+      expect(chips[0].label).to.equal('Doe, John (30)');
+      expect(chips[1].label).to.equal('Johnson, Bob (35)');
+    });
+
+    it('should update chips when itemLabelGenerator changes', async () => {
+      comboBox.itemLabelGenerator = (item) => item.name;
+      comboBox.itemIdPath = 'id';
+      comboBox.selectedItems = [{ id: 1, name: 'John', surname: 'Doe', age: 30 }];
+      await nextRender();
+
+      let chip = comboBox.querySelector('vaadin-multi-select-combo-box-chip[slot="chip"]');
+      expect(chip.label).to.equal('John');
+
+      comboBox.itemLabelGenerator = (item) => `${item.name} (${item.age})`;
+      await nextRender();
+
+      chip = comboBox.querySelector('vaadin-multi-select-combo-box-chip[slot="chip"]');
+      expect(chip.label).to.equal('John (30)');
+    });
+
+    it('should work with string items when itemLabelGenerator is not set', async () => {
+      comboBox.items = ['Apple', 'Banana', 'Orange'];
+      await nextRender();
+
+      comboBox.selectedItems = ['Apple', 'Orange'];
+      await nextRender();
+
+      const chips = comboBox.querySelectorAll('vaadin-multi-select-combo-box-chip[slot="chip"]');
+      expect(chips.length).to.equal(2);
+      expect(chips[0].label).to.equal('Apple');
+      expect(chips[1].label).to.equal('Orange');
+    });
+
+    it('should handle overflow chip with generated labels', async () => {
+      comboBox.autoExpandVertically = false;
+      comboBox.style.width = '200px';
+      comboBox.itemLabelGenerator = (item) => `${item.name} ${item.surname}`;
+      comboBox.itemIdPath = 'id';
+
+      // Select many items to trigger overflow
+      comboBox.selectedItems = [
+        { id: 1, name: 'John', surname: 'Doe', age: 30 },
+        { id: 2, name: 'Jane', surname: 'Smith', age: 25 },
+        { id: 3, name: 'Bob', surname: 'Johnson', age: 35 },
+        { id: 4, name: 'Alice', surname: 'Williams', age: 28 },
+      ];
+      await nextRender();
+
+      const overflowChip = comboBox.querySelector('vaadin-multi-select-combo-box-chip[slot="overflow"]');
+      if (overflowChip && !overflowChip.hasAttribute('hidden')) {
+        // Overflow chip should show count
+        expect(overflowChip.hasAttribute('count')).to.be.true;
+      }
+    });
+
+    it('should clear input value after selecting item with generated label', async () => {
+      comboBox.itemLabelGenerator = (item) => `${item.name} ${item.surname}`;
+      comboBox.itemIdPath = 'id';
+
+      comboBox.inputElement.value = 'Jane Smith';
+      comboBox.inputElement.dispatchEvent(new Event('input'));
+      await nextRender();
+
+      // Simulate selecting the item
+      const items = comboBox._scroller.querySelectorAll('vaadin-multi-select-combo-box-item');
+      items[0].click();
+      await nextRender();
+
+      expect(comboBox.inputElement.value).to.equal('');
+      const chips = comboBox.querySelectorAll('vaadin-multi-select-combo-box-chip[slot="chip"]');
+      expect(chips[0].label).to.equal('Jane Smith');
+    });
+  });
+});
diff --git a/packages/select/src/vaadin-select-base-mixin.js b/packages/select/src/vaadin-select-base-mixin.js
index 1987d27fc00..5c829e25dd7 100644
--- a/packages/select/src/vaadin-select-base-mixin.js
+++ b/packages/select/src/vaadin-select-base-mixin.js
@@ -135,6 +135,17 @@ export const SelectBaseMixin = (superClass) =>
           value: false,
         },
 
+        /**
+         * Function that is used to generate the label for each item.
+         * Receives one argument:
+         * - `item` The item to generate the label for.
+         *
+         * @type {(item: SelectItem) => string}
+         */
+        itemLabelGenerator: {
+          type: Function,
+        },
+
         /** @private */
         _phone: Boolean,
 
@@ -436,11 +447,17 @@ export const SelectBaseMixin = (superClass) =>
     __attachSelectedItem(selected) {
       let labelItem;
 
-      const label = selected.getAttribute('label');
-      if (label) {
-        labelItem = this.__createItemElement({ label });
+      // Check if we should use itemLabelGenerator
+      if (this.itemLabelGenerator && selected.__dataItem) {
+        const generatedLabel = this.itemLabelGenerator(selected.__dataItem);
+        labelItem = this.__createItemElement({ label: generatedLabel }, true);
       } else {
-        labelItem = selected.cloneNode(true);
+        const label = selected.getAttribute('label');
+        if (label) {
+          labelItem = this.__createItemElement({ label }, true);
+        } else {
+          labelItem = selected.cloneNode(true);
+        }
       }
 
       // Store reference to the original item
@@ -454,12 +471,20 @@ export const SelectBaseMixin = (superClass) =>
 
     /**
      * @param {!SelectItem} item
+     * @param {boolean} skipGenerator - Skip itemLabelGenerator to avoid double processing
      * @private
      */
-    __createItemElement(item) {
+    __createItemElement(item, skipGenerator = false) {
       const itemElement = document.createElement(item.component || 'vaadin-select-item');
-      if (item.label) {
-        itemElement.textContent = item.label;
+      let label = item.label;
+
+      // Use itemLabelGenerator if available and not skipped
+      if (this.itemLabelGenerator && item.component !== 'hr' && !skipGenerator && !item.label) {
+        label = this.itemLabelGenerator(item);
+      }
+
+      if (label) {
+        itemElement.textContent = label;
       }
       if (item.value) {
         itemElement.value = item.value;
@@ -544,7 +569,7 @@ export const SelectBaseMixin = (superClass) =>
       if (this._hasContent(selected)) {
         this.__attachSelectedItem(selected);
       } else if (this.placeholder) {
-        const item = this.__createItemElement({ label: this.placeholder });
+        const item = this.__createItemElement({ label: this.placeholder }, true);
         this.__appendValueItemElement(item, valueButton);
         valueButton.setAttribute('placeholder', '');
       }
@@ -648,7 +673,10 @@ export const SelectBaseMixin = (superClass) =>
 
       listBox.textContent = '';
       this.items.forEach((item) => {
-        listBox.appendChild(this.__createItemElement(item));
+        const itemElement = this.__createItemElement(item);
+        // Store the original data item on the element
+        itemElement.__dataItem = item;
+        listBox.appendChild(itemElement);
       });
     }
 
diff --git a/packages/select/test/item-label-generator.test.js b/packages/select/test/item-label-generator.test.js
new file mode 100644
index 00000000000..22148e0e8f3
--- /dev/null
+++ b/packages/select/test/item-label-generator.test.js
@@ -0,0 +1,103 @@
+import { expect } from '@vaadin/chai-plugins';
+import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import '../vaadin-select.js';
+
+describe('item-label-generator', () => {
+  let select;
+
+  beforeEach(async () => {
+    select = fixtureSync('<vaadin-select></vaadin-select>');
+    await nextRender();
+  });
+
+  describe('basic functionality', () => {
+    beforeEach(() => {
+      select.items = [
+        { value: 'recent', displayName: 'Most recent first' },
+        { value: 'rating-asc', displayName: 'Rating: low to high' },
+        { value: 'rating-desc', displayName: 'Rating: high to low' },
+        { value: 'price-asc', displayName: 'Price: low to high' },
+        { value: 'price-desc', displayName: 'Price: high to low' },
+      ];
+    });
+
+    it('should generate labels using itemLabelGenerator', () => {
+      select.itemLabelGenerator = (item) => item.displayName;
+      select.requestContentUpdate();
+
+      const items = select._menuElement.querySelectorAll('vaadin-select-item');
+      expect(items[0].textContent).to.equal('Most recent first');
+      expect(items[1].textContent).to.equal('Rating: low to high');
+      expect(items[2].textContent).to.equal('Rating: high to low');
+      expect(items[3].textContent).to.equal('Price: low to high');
+      expect(items[4].textContent).to.equal('Price: high to low');
+    });
+
+    it('should show generated label in value button when item is selected', async () => {
+      select.itemLabelGenerator = (item) => item.displayName;
+      select.value = 'rating-asc';
+      await nextRender();
+
+      const valueButton = select.querySelector('[slot="value"]');
+      expect(valueButton.textContent.trim()).to.equal('Rating: low to high');
+    });
+
+    it('should prefer explicit label over itemLabelGenerator', () => {
+      select.items = [
+        { value: 'recent', label: 'Explicit label', displayName: 'Most recent first' },
+        { value: 'rating-asc', displayName: 'Rating: low to high' },
+      ];
+      select.itemLabelGenerator = (item) => item.displayName;
+      select.requestContentUpdate();
+
+      const items = select._menuElement.querySelectorAll('vaadin-select-item');
+      expect(items[0].textContent).to.equal('Explicit label');
+      expect(items[1].textContent).to.equal('Rating: low to high');
+    });
+
+    it('should not use itemLabelGenerator for separator items', () => {
+      select.items = [
+        { value: 'recent', displayName: 'Most recent first' },
+        { component: 'hr' },
+        { value: 'rating-asc', displayName: 'Rating: low to high' },
+      ];
+      select.itemLabelGenerator = (item) => item.displayName;
+      select.requestContentUpdate();
+
+      const items = select._menuElement.querySelectorAll('vaadin-select-item, hr');
+      expect(items[0].textContent).to.equal('Most recent first');
+      expect(items[1].tagName).to.equal('HR');
+      expect(items[2].textContent).to.equal('Rating: low to high');
+    });
+
+    it('should handle custom label with complex data', () => {
+      select.items = [
+        { id: 1, name: 'John', surname: 'Doe', age: 30 },
+        { id: 2, name: 'Jane', surname: 'Smith', age: 25 },
+        { id: 3, name: 'Bob', surname: 'Johnson', age: 35 },
+      ];
+      select.itemLabelGenerator = (item) => `${item.name} ${item.surname} (${item.age})`;
+      select.itemValuePath = 'id';
+      select.requestContentUpdate();
+
+      const items = select._menuElement.querySelectorAll('vaadin-select-item');
+      expect(items[0].textContent).to.equal('John Doe (30)');
+      expect(items[1].textContent).to.equal('Jane Smith (25)');
+      expect(items[2].textContent).to.equal('Bob Johnson (35)');
+    });
+
+    it('should update dropdown when itemLabelGenerator is changed', () => {
+      select.itemLabelGenerator = (item) => item.value;
+      select.requestContentUpdate();
+
+      let items = select._menuElement.querySelectorAll('vaadin-select-item');
+      expect(items[0].textContent).to.equal('recent');
+
+      select.itemLabelGenerator = (item) => item.displayName;
+      select.requestContentUpdate();
+
+      items = select._menuElement.querySelectorAll('vaadin-select-item');
+      expect(items[0].textContent).to.equal('Most recent first');
+    });
+  });
+});

From f62eafa23d02a9d12aa7a02746c5bea4790e9491 Mon Sep 17 00:00:00 2001
From: Artur Signell <artur@vaadin.com>
Date: Mon, 25 Aug 2025 17:54:18 +0300
Subject: [PATCH 2/4] feat: add TypeScript definitions for itemLabelGenerator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add itemLabelGenerator type definition to SelectBaseMixinClass
- Add itemLabelGenerator type definition to ComboBoxItemsMixinClass
- MultiSelectComboBoxMixinClass inherits the type automatically via ComboBoxItemsMixinClass

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 packages/combo-box/src/vaadin-combo-box-items-mixin.d.ts | 7 +++++++
 packages/select/src/vaadin-select-base-mixin.d.ts        | 7 +++++++
 2 files changed, 14 insertions(+)

diff --git a/packages/combo-box/src/vaadin-combo-box-items-mixin.d.ts b/packages/combo-box/src/vaadin-combo-box-items-mixin.d.ts
index 286e130590c..9ad0dced1d2 100644
--- a/packages/combo-box/src/vaadin-combo-box-items-mixin.d.ts
+++ b/packages/combo-box/src/vaadin-combo-box-items-mixin.d.ts
@@ -50,4 +50,11 @@ export declare class ComboBoxItemsMixinClass<TItem> {
    * @attr {string} item-value-path
    */
   itemValuePath: string;
+
+  /**
+   * Function that is used to generate the label for each item.
+   * Receives one argument:
+   * - `item` The item to generate the label for.
+   */
+  itemLabelGenerator: ((item: TItem) => string) | undefined;
 }
diff --git a/packages/select/src/vaadin-select-base-mixin.d.ts b/packages/select/src/vaadin-select-base-mixin.d.ts
index 67ff0e13739..3faebbbb71d 100644
--- a/packages/select/src/vaadin-select-base-mixin.d.ts
+++ b/packages/select/src/vaadin-select-base-mixin.d.ts
@@ -107,6 +107,13 @@ export declare class SelectBaseMixinClass {
    */
   noVerticalOverlap: boolean;
 
+  /**
+   * Function that is used to generate the label for each item.
+   * Receives one argument:
+   * - `item` The item to generate the label for.
+   */
+  itemLabelGenerator: ((item: SelectItem) => string) | undefined;
+
   /**
    * Requests an update for the content of the select.
    * While performing the update, it invokes the renderer passed in the `renderer` property.

From b1b96070baf906bceaa12b7ff7a4200c49539e55 Mon Sep 17 00:00:00 2001
From: Artur Signell <artur@vaadin.com>
Date: Mon, 25 Aug 2025 18:04:22 +0300
Subject: [PATCH 3/4] fix: fix multi-select-combo-box itemLabelGenerator tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Follow the existing pattern of counting overflow chip in total chip count
- Use getChips() helper function consistently with existing tests
- Access chip labels at correct indices (skip overflow chip at [0])
- Set proper width and await nextRender for consistent chip rendering

All tests now pass:
- select: 6/6 tests ✅
- combo-box: 8/8 tests ✅
- multi-select-combo-box: 9/9 tests ✅

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../test/item-label-generator.test.js         | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/multi-select-combo-box/test/item-label-generator.test.js b/packages/multi-select-combo-box/test/item-label-generator.test.js
index d8b195e0a11..ad3d6b7ea62 100644
--- a/packages/multi-select-combo-box/test/item-label-generator.test.js
+++ b/packages/multi-select-combo-box/test/item-label-generator.test.js
@@ -11,14 +11,18 @@ describe('item-label-generator', () => {
     await nextRender();
   });
 
+  const getChips = (combo) => combo.querySelectorAll('vaadin-multi-select-combo-box-chip');
+
   describe('basic functionality', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       comboBox.items = [
         { id: 1, name: 'John', surname: 'Doe', age: 30 },
         { id: 2, name: 'Jane', surname: 'Smith', age: 25 },
         { id: 3, name: 'Bob', surname: 'Johnson', age: 35 },
         { id: 4, name: 'Alice', surname: 'Williams', age: 28 },
       ];
+      comboBox.style.width = '100%';
+      await nextRender();
     });
 
     it('should generate labels using itemLabelGenerator in dropdown', async () => {
@@ -44,10 +48,10 @@ describe('item-label-generator', () => {
       ];
       await nextRender();
 
-      const chips = comboBox.querySelectorAll('vaadin-multi-select-combo-box-chip[slot="chip"]');
-      expect(chips.length).to.equal(2);
-      expect(chips[0].label).to.equal('John Doe');
-      expect(chips[1].label).to.equal('Jane Smith');
+      const chips = getChips(comboBox);
+      expect(chips.length).to.equal(3); // Includes overflow chip
+      expect(chips[1].label).to.equal('John Doe');
+      expect(chips[2].label).to.equal('Jane Smith');
     });
 
     it('should filter items using generated labels', () => {
@@ -86,10 +90,10 @@ describe('item-label-generator', () => {
       ];
       await nextRender();
 
-      const chips = comboBox.querySelectorAll('vaadin-multi-select-combo-box-chip[slot="chip"]');
-      expect(chips.length).to.equal(2);
-      expect(chips[0].label).to.equal('Doe, John (30)');
-      expect(chips[1].label).to.equal('Johnson, Bob (35)');
+      const chips = getChips(comboBox);
+      expect(chips.length).to.equal(3); // Includes overflow chip
+      expect(chips[1].label).to.equal('Doe, John (30)');
+      expect(chips[2].label).to.equal('Johnson, Bob (35)');
     });
 
     it('should update chips when itemLabelGenerator changes', async () => {
@@ -115,10 +119,10 @@ describe('item-label-generator', () => {
       comboBox.selectedItems = ['Apple', 'Orange'];
       await nextRender();
 
-      const chips = comboBox.querySelectorAll('vaadin-multi-select-combo-box-chip[slot="chip"]');
-      expect(chips.length).to.equal(2);
-      expect(chips[0].label).to.equal('Apple');
-      expect(chips[1].label).to.equal('Orange');
+      const chips = getChips(comboBox);
+      expect(chips.length).to.equal(3); // Includes overflow chip
+      expect(chips[1].label).to.equal('Apple');
+      expect(chips[2].label).to.equal('Orange');
     });
 
     it('should handle overflow chip with generated labels', async () => {

From 58249453f57e31de7c569d21ed0b8df2772cf2c2 Mon Sep 17 00:00:00 2001
From: Artur Signell <artur@vaadin.com>
Date: Tue, 26 Aug 2025 09:39:11 +0300
Subject: [PATCH 4/4] prettier

---
 dev/multi-select-combo-box.html | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/dev/multi-select-combo-box.html b/dev/multi-select-combo-box.html
index 8f72830fbcd..e3757d68eb7 100644
--- a/dev/multi-select-combo-box.html
+++ b/dev/multi-select-combo-box.html
@@ -84,7 +84,7 @@
       </vaadin-multi-select-combo-box>
     </div>
 
-    <div style="margin-top: 2rem;">
+    <div style="margin-top: 2rem">
       <h3>Object items with itemLabelGenerator</h3>
       <vaadin-multi-select-combo-box
         id="object-items"
@@ -174,11 +174,9 @@ <h3>Object items with itemLabelGenerator</h3>
         { id: 8, firstName: 'Fiona', lastName: 'Green', department: 'Marketing', role: 'Marketing Manager' },
       ];
       objectItemsComboBox.itemIdPath = 'id';
-      objectItemsComboBox.itemLabelGenerator = (item) => `${item.firstName} ${item.lastName} (${item.department} - ${item.role})`;
-      objectItemsComboBox.selectedItems = [
-        objectItemsComboBox.items[0],
-        objectItemsComboBox.items[2],
-      ];
+      objectItemsComboBox.itemLabelGenerator = (item) =>
+        `${item.firstName} ${item.lastName} (${item.department} - ${item.role})`;
+      objectItemsComboBox.selectedItems = [objectItemsComboBox.items[0], objectItemsComboBox.items[2]];
 
       // Event listeners for changes
       comboBox.addEventListener('custom-value-set', (event) => {