{selectText}
@@ -1109,6 +1149,7 @@ export class Select implements ComponentInterface {
private get ariaLabel() {
const { placeholder, inheritedAttributes } = this;
+ // Get the plain text from the selected text
const displayValue = this.getText();
// The aria label should be preferred over visible text if both are specified
@@ -1411,30 +1452,118 @@ const parseValue = (value: any) => {
const generateText = (
opts: HTMLIonSelectOptionElement[],
value: any | any[],
- compareWith?: string | SelectCompareFn | null
+ compareWith?: string | SelectCompareFn | null,
+ useHTML = false
) => {
if (value === undefined) {
return '';
}
if (Array.isArray(value)) {
return value
- .map((v) => textForValue(opts, v, compareWith))
+ .map((v) => textForValue(opts, v, compareWith, useHTML))
.filter((opt) => opt !== null)
.join(', ');
} else {
- return textForValue(opts, value, compareWith) || '';
+ return textForValue(opts, value, compareWith, useHTML) || '';
}
};
const textForValue = (
opts: HTMLIonSelectOptionElement[],
value: any,
- compareWith?: string | SelectCompareFn | null
+ compareWith?: string | SelectCompareFn | null,
+ useHTML = false
): string | null => {
const selectOpt = opts.find((opt) => {
return compareOptions(value, getOptionValue(opt), compareWith);
});
- return selectOpt ? selectOpt.textContent : null;
+ const customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+
+ if (!selectOpt) return null;
+
+ return customHTMLEnabled && useHTML
+ ? (getOptionContent(selectOpt, undefined, true) as string | null)
+ : selectOpt.textContent;
+};
+
+/**
+ * Trims whitespace from all text nodes within a DOM tree.
+ * This prevents invisible layout shifts and unwanted gaps between
+ * elements when HTML content is injected via innerHTML or cloneNode,
+ * as browsers preserve whitespace (tabs, newlines, spaces) from
+ * the original source markup.
+ *
+ * @param node The root node to start trimming text nodes from.
+ */
+const trimTextNodes = (node: Node): void => {
+ node.childNodes.forEach((child) => {
+ if (child.nodeType === Node.TEXT_NODE) {
+ child.textContent = child.textContent?.trim() || '';
+ } else if (child.nodeType === Node.ELEMENT_NODE) {
+ trimTextNodes(child);
+ }
+ });
+};
+
+/**
+ * Extracts and clones content from an `ion-select-option` element
+ * for rendering within overlay interfaces or the select text when `customHTMLEnabled` is `true`.
+ *
+ * @param option - The `ion-select-option` element to extract content from.
+ * @param slotName - Optional slot name to extract. If omitted, extracts the default slot content.
+ * @param useHTML - If `true`, the returned string will include any custom HTML content. If `false`, the returned string will be plain text without any HTML.
+ * @returns When `useHTML` is `true`, a sanitized HTML string. When `false`, a
+ * div element containing cloned child nodes. Returns `null` if no matching
+ * content is found.
+ */
+const getOptionContent = (
+ option: HTMLIonSelectOptionElement,
+ slotName?: string,
+ useHTML: boolean = false
+): HTMLElement | string | null => {
+ let nodes: Node[];
+
+ if (slotName) {
+ // Named slot: get elements with matching slot attribute
+ nodes = Array.from(option.children).filter((el) => el.getAttribute('slot') === slotName);
+ } else {
+ // Default slot: get nodes without a slot attribute
+ nodes = Array.from(option.childNodes).filter((node) => {
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ return !(node as HTMLElement).hasAttribute('slot');
+ }
+
+ // Exclude whitespace-only text nodes to prevent empty container returns
+ return node.textContent?.trim().length !== 0;
+ });
+ }
+
+ if (nodes.length === 0) {
+ return null;
+ }
+
+ // Return plain text if no elements are found
+ if (!slotName && nodes.every((n) => n.nodeType === Node.TEXT_NODE)) {
+ return nodes.map((n) => n.textContent?.trim()).join(' ') || null;
+ }
+
+ // Clone each node into a temporary container
+ const container = document.createElement('div');
+ nodes.forEach((n) => {
+ const clone = n.cloneNode(true);
+ if (clone.nodeType === Node.TEXT_NODE) {
+ clone.textContent = clone.textContent?.trim() || '';
+ } else {
+ trimTextNodes(clone);
+ }
+ container.appendChild(clone);
+ });
+
+ if (useHTML) {
+ return sanitizeDOMString(container.innerHTML.trim()) || null;
+ }
+
+ return container;
};
let selectIds = 0;
diff --git a/core/src/components/select/test/basic/index.html b/core/src/components/select/test/basic/index.html
index 1048e1db3e6..631fca2e918 100644
--- a/core/src/components/select/test/basic/index.html
+++ b/core/src/components/select/test/basic/index.html
@@ -12,6 +12,27 @@
+
+
+
@@ -30,31 +51,59 @@
- Apples
+
+
+ 
+
+ Apples
+ This is a span element
+ NEW
+
Oranges
Pears
-
- Apples
+
+
+
+
+
+ Apples
+ This is a span element
+ NEW
+
Oranges
Pears
-
- Apples
+
+
+
+
+
+ Apples
+ This is a span element
+ NEW
+
Oranges
Pears
-
- Apples
+
+
+
+
+
+ Apples
+ This is a span element
+ NEW
+
Oranges
Pears
@@ -230,8 +279,15 @@
-
- Pepperoni
+
+
+
+
+
+ Pepperoni
+ This is a span element
+ NEW
+
Bacon
Extra Cheese
Mushrooms
@@ -240,8 +296,15 @@
-
- Bird
+
+
+
+
+
+ Bird
+ This is a span element
+ NEW
+
Cat
Dog
Honey Badger
@@ -249,8 +312,15 @@
-
- Bird
+
+
+
+
+
+ Bird
+ This is a span element
+ NEW
+
Cat
Dog
Honey Badger
diff --git a/core/src/components/select/test/basic/select.e2e.ts b/core/src/components/select/test/basic/select.e2e.ts
index bf23678e657..881e1f35eb3 100644
--- a/core/src/components/select/test/basic/select.e2e.ts
+++ b/core/src/components/select/test/basic/select.e2e.ts
@@ -605,3 +605,363 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
});
});
});
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+ test.describe(title('select: rich content options'), () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto('/src/components/select/test/basic', config);
+ });
+
+ test('it should render for alert interface and single selection', async ({ page }) => {
+ const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+ const ionAlertDidDismiss = await page.spyOnEvent('ionAlertDidDismiss');
+
+ const select = page.locator('#alert-select');
+
+ await select.click();
+
+ await ionAlertDidPresent.next();
+
+ const alert = page.locator('ion-alert');
+ const firstOption = alert.locator('.alert-radio-label').first();
+ const avatar = firstOption.locator('ion-avatar');
+ const spanText = await firstOption.locator('.span-style').textContent();
+ const firstOptionText = 'Apples';
+
+ await expect(firstOption).toContainText(firstOptionText);
+ await expect(avatar).toBeVisible();
+
+ // Click on the first option
+ await firstOption.click();
+
+ // Confirm the selection
+ const confirmButton = alert.locator('.alert-button:not(.alert-button-role-cancel)');
+ await confirmButton.click();
+
+ await ionAlertDidDismiss.next();
+
+ // Verify that the select text includes the option text
+ const selectText = await select.locator('.select-text').textContent();
+
+ expect(selectText).toContain(firstOptionText);
+ expect(selectText).toContain(spanText);
+
+ // Verify that the select text does not include the avatar and badge
+ const selectTextAvatar = select.locator('.select-text ion-avatar');
+ const selectTextBadge = select.locator('.select-text ion-badge');
+
+ await expect(selectTextAvatar).toHaveCount(0);
+ await expect(selectTextBadge).toHaveCount(0);
+ });
+
+ test('it should render for alert interface and multiple selection', async ({ page }) => {
+ const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+ const ionAlertDidDismiss = await page.spyOnEvent('ionAlertDidDismiss');
+
+ const select = page.locator('#alert-select-multiple');
+
+ await select.click();
+
+ await ionAlertDidPresent.next();
+
+ const alert = page.locator('ion-alert');
+ const firstOption = alert.locator('.alert-checkbox-label').first();
+ const avatar = firstOption.locator('ion-avatar');
+ const spanText = await firstOption.locator('.span-style').textContent();
+ const firstOptionText = 'Pepperoni';
+
+ await expect(firstOption).toContainText(firstOptionText);
+ await expect(avatar).toBeVisible();
+
+ // Click on the first option
+ await firstOption.click();
+
+ // Confirm the selection
+ const confirmButton = alert.locator('.alert-button:not(.alert-button-role-cancel)');
+ await confirmButton.click();
+
+ await ionAlertDidDismiss.next();
+
+ // Verify that the select text includes the option text
+ const selectText = await select.locator('.select-text').textContent();
+
+ expect(selectText).toContain(firstOptionText);
+ expect(selectText).toContain(spanText);
+
+ // Verify that the select text does not include the avatar and badge
+ const selectTextAvatar = select.locator('.select-text ion-avatar');
+ const selectTextBadge = select.locator('.select-text ion-badge');
+
+ await expect(selectTextAvatar).toHaveCount(0);
+ await expect(selectTextBadge).toHaveCount(0);
+ });
+
+ test('it should render for action sheet interface', async ({ page }) => {
+ const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+ const ionActionSheetDidDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');
+
+ const select = page.locator('#action-sheet-select');
+
+ await select.click();
+
+ await ionActionSheetDidPresent.next();
+
+ const actionSheet = page.locator('ion-action-sheet');
+ const firstOption = actionSheet.locator('.action-sheet-button-label').first();
+ const avatar = firstOption.locator('ion-avatar');
+ const spanText = await firstOption.locator('.span-style').textContent();
+ const firstOptionText = 'Apples';
+
+ await expect(firstOption).toContainText(firstOptionText);
+ await expect(avatar).toBeVisible();
+
+ // Click on the first option
+ await firstOption.click();
+
+ await ionActionSheetDidDismiss.next();
+
+ // Verify that the select text includes the option text
+ const selectText = await select.locator('.select-text').textContent();
+
+ expect(selectText).toContain(firstOptionText);
+ expect(selectText).toContain(spanText);
+
+ // Verify that the select text does not include the avatar and badge
+ const selectTextAvatar = select.locator('.select-text ion-avatar');
+ const selectTextBadge = select.locator('.select-text ion-badge');
+
+ await expect(selectTextAvatar).toHaveCount(0);
+ await expect(selectTextBadge).toHaveCount(0);
+ });
+
+ test('it should render for popover interface and single selection', async ({ page }) => {
+ const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+ const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+
+ const select = page.locator('#popover-select');
+
+ await select.click();
+
+ await ionPopoverDidPresent.next();
+
+ const popover = page.locator('ion-popover');
+ const firstOption = popover.locator('.select-option-label').first();
+ const avatar = firstOption.locator('ion-avatar');
+ const spanText = await firstOption.locator('.span-style').textContent();
+ const firstOptionText = 'Apples';
+
+ await expect(firstOption).toContainText(firstOptionText);
+ await expect(avatar).toBeVisible();
+
+ // Click on the first option
+ await firstOption.click();
+
+ await ionPopoverDidDismiss.next();
+
+ // Verify that the select text includes the option text
+ const selectText = await select.locator('.select-text').textContent();
+
+ expect(selectText).toContain(firstOptionText);
+ expect(selectText).toContain(spanText);
+
+ // Verify that the select text does not include the avatar and badge
+ const selectTextAvatar = select.locator('.select-text ion-avatar');
+ const selectTextBadge = select.locator('.select-text ion-badge');
+
+ await expect(selectTextAvatar).toHaveCount(0);
+ await expect(selectTextBadge).toHaveCount(0);
+ });
+
+ test('it should render for popover interface and multiple selection', async ({ page }) => {
+ const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+ const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+
+ const select = page.locator('#popover-select-multiple');
+
+ await select.click();
+
+ await ionPopoverDidPresent.next();
+
+ const popover = page.locator('ion-popover');
+ const firstOption = popover.locator('.select-option-label').first();
+ const avatar = firstOption.locator('ion-avatar');
+ const spanText = await firstOption.locator('.span-style').textContent();
+ const firstOptionText = 'Bird';
+
+ await expect(firstOption).toContainText(firstOptionText);
+ await expect(avatar).toBeVisible();
+
+ // Click on the first option
+ await firstOption.click();
+
+ // Confirm the selection
+ const backdrop = page.locator('ion-backdrop');
+ await backdrop.click({ position: { x: 10, y: 10 } });
+
+ await ionPopoverDidDismiss.next();
+
+ // Verify that the select text includes the option text
+ const selectText = await select.locator('.select-text').textContent();
+
+ expect(selectText).toContain(firstOptionText);
+ expect(selectText).toContain(spanText);
+
+ // Verify that the select text does not include the avatar and badge
+ const selectTextAvatar = select.locator('.select-text ion-avatar');
+ const selectTextBadge = select.locator('.select-text ion-badge');
+
+ await expect(selectTextAvatar).toHaveCount(0);
+ await expect(selectTextBadge).toHaveCount(0);
+ });
+
+ test('it should render for modal interface and single selection', async ({ page }) => {
+ const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+ const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+ const select = page.locator('#modal-select');
+
+ await select.click();
+
+ await ionModalDidPresent.next();
+
+ const modal = page.locator('ion-modal');
+ const firstOption = modal.locator('.select-option-label').first();
+ const avatar = firstOption.locator('ion-avatar');
+ const spanText = await firstOption.locator('.span-style').textContent();
+ const firstOptionText = 'Apples';
+
+ await expect(firstOption).toContainText(firstOptionText);
+ await expect(avatar).toBeVisible();
+
+ // Click on the first option
+ await firstOption.click();
+
+ await ionModalDidDismiss.next();
+
+ // Verify that the select text includes the option text
+ const selectText = await select.locator('.select-text').textContent();
+
+ expect(selectText).toContain(firstOptionText);
+ expect(selectText).toContain(spanText);
+
+ // Verify that the select text does not include the avatar and badge
+ const selectTextAvatar = select.locator('.select-text ion-avatar');
+ const selectTextBadge = select.locator('.select-text ion-badge');
+
+ await expect(selectTextAvatar).toHaveCount(0);
+ await expect(selectTextBadge).toHaveCount(0);
+ });
+
+ test('it should render for modal interface and multiple selection', async ({ page }) => {
+ const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+ const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+ const select = page.locator('#modal-select-multiple');
+
+ await select.click();
+
+ await ionModalDidPresent.next();
+
+ const modal = page.locator('ion-modal');
+ const firstOption = modal.locator('.select-option-label').first();
+ const avatar = firstOption.locator('ion-avatar');
+ const spanText = await firstOption.locator('.span-style').textContent();
+ const firstOptionText = 'Bird';
+
+ await expect(firstOption).toContainText(firstOptionText);
+ await expect(avatar).toBeVisible();
+
+ // Click on the first option
+ await firstOption.click();
+
+ // Confirm the selection
+ const cancelButton = modal.getByRole('button', { name: 'Cancel' });
+
+ await cancelButton.click();
+ await ionModalDidDismiss.next();
+
+ // Verify that the select text includes the option text
+ const selectText = await select.locator('.select-text').textContent();
+
+ expect(selectText).toContain(firstOptionText);
+ expect(selectText).toContain(spanText);
+
+ // Verify that the select text does not include the avatar and badge
+ const selectTextAvatar = select.locator('.select-text ion-avatar');
+ const selectTextBadge = select.locator('.select-text ion-badge');
+
+ await expect(selectTextAvatar).toHaveCount(0);
+ await expect(selectTextBadge).toHaveCount(0);
+ });
+ });
+});
+
+/**
+ * This behavior does not vary across modes
+ */
+configs({ modes: ['md'] }).forEach(({ title, config }) => {
+ test.describe(title('select: rich content options'), () => {
+ test('it should render slots in the correct places', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ NEW
+
+
+
+ Apples
+
+
+
+
+ `,
+ config
+ );
+
+ const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+ await page.locator('ion-select').click();
+
+ await ionAlertDidPresent.next();
+
+ const alert = page.locator('ion-alert');
+ const firstOption = alert.locator('.alert-radio-label').first();
+ const startContainer = firstOption.locator('.select-option-start');
+ const endContainer = firstOption.locator('.select-option-end');
+
+ const avatar = startContainer.locator('ion-avatar');
+ const badge = endContainer.locator('ion-badge');
+
+ await expect(avatar).toBeVisible();
+ await expect(badge).toBeVisible();
+
+ const isRTL = await page.evaluate(() => document.dir === 'rtl');
+ const optionBox = await firstOption.boundingBox();
+ const startBox = await startContainer.boundingBox();
+ const endBox = await endContainer.boundingBox();
+ const optionMidpointX = optionBox!.x + optionBox!.width / 2;
+
+ if (isRTL) {
+ // Verify the start container is rendered on the right,
+ // and the end container is rendered on the left
+ expect(startBox!.x).toBeGreaterThan(optionMidpointX);
+ expect(endBox!.x).toBeLessThan(optionMidpointX);
+ } else {
+ // Verify the start container is rendered on the left,
+ // and the end container is rendered on the right
+ expect(startBox!.x).toBeLessThan(optionMidpointX);
+ expect(endBox!.x).toBeGreaterThan(optionMidpointX);
+ }
+ });
+ });
+});
diff --git a/core/src/utils/select-option-render.tsx b/core/src/utils/select-option-render.tsx
new file mode 100644
index 00000000000..c5dfdbf2d43
--- /dev/null
+++ b/core/src/utils/select-option-render.tsx
@@ -0,0 +1,131 @@
+import { h } from '@stencil/core';
+
+import { sanitizeDOMString } from './sanitization';
+
+interface RichContentOption {
+ /** Unique identifier for stable virtual DOM keys across re-renders. */
+ id: string;
+ /** The main label for the option as a string or an HTMLElement. */
+ label?: string | HTMLElement;
+ /** Content to display at the start of the option. */
+ startContent?: HTMLElement;
+ /** Content to display at the end of the option. */
+ endContent?: HTMLElement;
+ /** A description for the option. */
+ description?: string;
+}
+
+/**
+ * Cache that maps rendered span elements to the source HTMLElement
+ * they were cloned from. This prevents flickering when a user
+ * selects an option that has rich content, as the content will only be
+ * re-rendered if the source HTMLElement changes.
+ */
+const contentCache = new WeakMap();
+
+/**
+ * Renders cloned DOM content into an element via a ref callback.
+ * The content is only cloned when the source element changes,
+ * preventing flicker caused by destroying and recreating web
+ * components (e.g., ion-avatar) on every re-render cycle.
+ *
+ * Span elements should be used when this content renders within buttons,
+ * depending on the select interface. Buttons can only have phrasing
+ * content to prevent accessibility issues.
+ *
+ * @param id - Unique identifier for generating stable virtual DOM keys.
+ * @param content - The HTMLElement container whose child nodes will be cloned.
+ * @param className - CSS class applied to the wrapper span.
+ * @param useSpan - Whether to use a span element instead of a div for the wrapper.
+ */
+const renderClonedContent = (id: string, content: HTMLElement, className: string, useSpan = false) => {
+ const Tag = useSpan ? 'span' : 'div';
+ return (
+ {
+ if (el) {
+ const cached = contentCache.get(el);
+ // Skip if this element already has clones from the same source
+ if (cached === content) {
+ return;
+ }
+
+ const sanitized = sanitizeDOMString(content.innerHTML);
+ el.innerHTML = sanitized ?? '';
+ contentCache.set(el, content);
+ }
+ }}
+ >
+ );
+};
+
+/**
+ * Renders the label content for a select option within an overlay
+ * interface based on the presence of rich content.
+ *
+ * Span elements should be used when this content renders within buttons,
+ * depending on the select interface. Buttons can only have phrasing
+ * content to prevent accessibility issues.
+ *
+ * @param option - The content option data containing label, slots,
+ * and description.
+ * @param className - The base CSS class for the label element.
+ * @param useSpan - Whether to use a span element instead of a div for the label.
+ */
+export const renderOptionLabel = (
+ option: RichContentOption,
+ className: string,
+ useSpan = false
+): HTMLElement | string | undefined => {
+ const { id, label, startContent, endContent, description } = option;
+ const hasRichContent = !!startContent || !!endContent || !!description;
+ const Tag = useSpan ? 'span' : 'div';
+
+ // Render simple string label if there is no rich content to display
+ if (!hasRichContent && (typeof label === 'string' || !label)) {
+ // const Tag = useSpan ? 'span' : 'div';
+
+ return (
+
+ {label}
+
+ );
+ }
+
+ // Render the main label
+ const labelEl =
+ typeof label === 'string' || !label ? (
+ // Label is a simple string or undefined
+ {label}
+ ) : (
+ // Label is an HTMLElement with potential rich content
+ renderClonedContent(id, label, `${className}-text`, useSpan)
+ );
+
+ // No rich content, render just the label
+ if (!hasRichContent) {
+ return (
+
+ {labelEl}
+
+ );
+ }
+
+ // Render label with rich content (start, end, description)
+ return (
+
+ {startContent && renderClonedContent(id, startContent, 'select-option-start', useSpan)}
+
+ {labelEl}
+ {description && (
+
+ {description}
+
+ )}
+
+ {endContent && renderClonedContent(id, endContent, 'select-option-end', useSpan)}
+
+ );
+};
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index fecc4aed2a8..77c90635a69 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -2253,14 +2253,14 @@ export declare interface IonSelectModal extends Components.IonSelectModal {}
@ProxyCmp({
- inputs: ['disabled', 'mode', 'theme', 'value']
+ inputs: ['description', 'disabled', 'mode', 'theme', 'value']
})
@Component({
selector: 'ion-select-option',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
- inputs: ['disabled', 'mode', 'theme', 'value'],
+ inputs: ['description', 'disabled', 'mode', 'theme', 'value'],
})
export class IonSelectOption {
protected el: HTMLIonSelectOptionElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index 41e27889758..1b0b7a38b2e 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -1986,14 +1986,14 @@ export declare interface IonSelectModal extends Components.IonSelectModal {}
@ProxyCmp({
defineCustomElementFn: defineIonSelectOption,
- inputs: ['disabled', 'mode', 'theme', 'value']
+ inputs: ['description', 'disabled', 'mode', 'theme', 'value']
})
@Component({
selector: 'ion-select-option',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
- inputs: ['disabled', 'mode', 'theme', 'value'],
+ inputs: ['description', 'disabled', 'mode', 'theme', 'value'],
standalone: true
})
export class IonSelectOption {
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index bf7ab19881d..cccb4233b58 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -998,7 +998,8 @@ export const IonSelectModal: StencilVueComponent = /*@__PURE
export const IonSelectOption: StencilVueComponent = /*@__PURE__*/ defineContainer('ion-select-option', defineIonSelectOption, [
'disabled',
- 'value'
+ 'value',
+ 'description'
]);