diff --git a/core/api.txt b/core/api.txt
index e4e1ca4d603..4bf94c415f6 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -2326,6 +2326,24 @@ ion-select,css-prop,--placeholder-opacity,md
 ion-select,css-prop,--ripple-color,ionic
 ion-select,css-prop,--ripple-color,ios
 ion-select,css-prop,--ripple-color,md
+ion-select,css-prop,--select-text-media-border-color,ionic
+ion-select,css-prop,--select-text-media-border-color,ios
+ion-select,css-prop,--select-text-media-border-color,md
+ion-select,css-prop,--select-text-media-border-radius,ionic
+ion-select,css-prop,--select-text-media-border-radius,ios
+ion-select,css-prop,--select-text-media-border-radius,md
+ion-select,css-prop,--select-text-media-border-style,ionic
+ion-select,css-prop,--select-text-media-border-style,ios
+ion-select,css-prop,--select-text-media-border-style,md
+ion-select,css-prop,--select-text-media-border-width,ionic
+ion-select,css-prop,--select-text-media-border-width,ios
+ion-select,css-prop,--select-text-media-border-width,md
+ion-select,css-prop,--select-text-media-height,ionic
+ion-select,css-prop,--select-text-media-height,ios
+ion-select,css-prop,--select-text-media-height,md
+ion-select,css-prop,--select-text-media-width,ionic
+ion-select,css-prop,--select-text-media-width,ios
+ion-select,css-prop,--select-text-media-width,md
 ion-select,part,bottom
 ion-select,part,container
 ion-select,part,error-text
@@ -2345,6 +2363,7 @@ ion-select-modal,prop,multiple,boolean | undefined,undefined,false,false
 ion-select-modal,prop,options,SelectModalOption[],[],false,false
 
 ion-select-option,shadow
+ion-select-option,prop,description,string | undefined,undefined,false,false
 ion-select-option,prop,disabled,boolean,false,false,false
 ion-select-option,prop,mode,"ios" | "md",undefined,false,false
 ion-select-option,prop,theme,"ios" | "md" | "ionic",undefined,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index ecbdb7475c6..86ac882a669 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -3813,6 +3813,10 @@ export namespace Components {
         "options": SelectModalOption[];
     }
     interface IonSelectOption {
+        /**
+          * Text that is placed underneath the option text to provide additional details about the option.
+         */
+        "description"?: string;
         /**
           * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
           * @default false
@@ -9897,6 +9901,10 @@ declare namespace LocalJSX {
         "options"?: SelectModalOption[];
     }
     interface IonSelectOption {
+        /**
+          * Text that is placed underneath the option text to provide additional details about the option.
+         */
+        "description"?: string;
         /**
           * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
           * @default false
@@ -11268,6 +11276,7 @@ declare namespace LocalJSX {
     interface IonSelectOptionAttributes {
         "disabled": boolean;
         "value": string;
+        "description": string;
     }
     interface IonSelectPopoverAttributes {
         "header": string;
diff --git a/core/src/components/action-sheet/action-sheet-interface.ts b/core/src/components/action-sheet/action-sheet-interface.ts
index 324835bb720..f0b4ee5971d 100644
--- a/core/src/components/action-sheet/action-sheet-interface.ts
+++ b/core/src/components/action-sheet/action-sheet-interface.ts
@@ -14,7 +14,7 @@ export interface ActionSheetOptions extends OverlayOptions {
 }
 
 export interface ActionSheetButton<T = any> {
-  text?: string;
+  text?: string | HTMLElement;
   role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;
   icon?: string;
   cssClass?: string | string[];
@@ -30,4 +30,7 @@ export interface ActionSheetButton<T = any> {
    * users to dismiss the action sheet.
    */
   disabled?: boolean;
+  startContent?: HTMLElement;
+  endContent?: HTMLElement;
+  description?: string;
 }
diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.common.scss
similarity index 96%
rename from core/src/components/action-sheet/action-sheet.scss
rename to core/src/components/action-sheet/action-sheet.common.scss
index 2a2f85bb456..7e857346ac9 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.common.scss
@@ -233,3 +233,20 @@
     }
   }
 }
+
+// Action Sheet: Select Option
+// --------------------------------------------------
+
+.action-sheet-button-label {
+  display: flex;
+
+  align-items: center;
+}
+
+.select-option-content {
+  flex: 1;
+}
+
+.select-option-description {
+  display: block;
+}
diff --git a/core/src/components/action-sheet/action-sheet.ionic.scss b/core/src/components/action-sheet/action-sheet.ionic.scss
new file mode 100644
index 00000000000..b2c749d4e0a
--- /dev/null
+++ b/core/src/components/action-sheet/action-sheet.ionic.scss
@@ -0,0 +1,22 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./action-sheet.common";
+@use "./action-sheet.md" as action-sheet-md;
+
+// Ionic Action Sheet
+// --------------------------------------------------
+
+// Action Sheet: Select Option
+// --------------------------------------------------
+
+.action-sheet-button-label {
+  gap: globals.$ion-space-300;
+}
+
+.select-option-description {
+  @include globals.typography(globals.$ion-body-md-regular);
+  @include globals.padding(0);
+
+  color: globals.$ion-text-subtle;
+
+  font-size: globals.$ion-font-size-350;
+}
diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss
index fe9bba89903..94b98447981 100644
--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.scss
@@ -1,4 +1,4 @@
-@import "./action-sheet";
+@import "./action-sheet.native";
 @import "./action-sheet.ios.vars";
 
 // iOS Action Sheet
diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss
index 8e1c7f07027..e46f06085b3 100644
--- a/core/src/components/action-sheet/action-sheet.md.scss
+++ b/core/src/components/action-sheet/action-sheet.md.scss
@@ -1,4 +1,4 @@
-@import "./action-sheet";
+@import "./action-sheet.native";
 @import "./action-sheet.md.vars";
 
 // Material Design Action Sheet Title
diff --git a/core/src/components/action-sheet/action-sheet.native.scss b/core/src/components/action-sheet/action-sheet.native.scss
new file mode 100644
index 00000000000..affa6aeb126
--- /dev/null
+++ b/core/src/components/action-sheet/action-sheet.native.scss
@@ -0,0 +1,19 @@
+@use "../../themes/native/native.theme.default" as native;
+@use "../../themes/mixins" as mixins;
+@use "../../themes/functions.font" as font;
+@use "./action-sheet.common";
+
+// Action Sheet: Native
+// --------------------------------------------------
+
+.action-sheet-button-label {
+  gap: 12px;
+}
+
+.select-option-description {
+  @include mixins.padding(5px, 0, 0, 0);
+
+  color: native.$text-color-step-300;
+
+  font-size: font.dynamic-font(12px);
+}
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 5d79ab90f51..4644b7f7d78 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -16,6 +16,7 @@ import {
   safeCall,
   setOverlayId,
 } from '@utils/overlays';
+import { renderOptionLabel } from '@utils/select-option-render';
 import { getClassMap } from '@utils/theme';
 
 import { getIonMode, getIonTheme } from '../../global/ionic-global';
@@ -37,7 +38,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
   styleUrls: {
     ios: 'action-sheet.ios.scss',
     md: 'action-sheet.md.scss',
-    ionic: 'action-sheet.md.scss',
+    ionic: 'action-sheet.ionic.scss',
   },
   scoped: true,
 })
@@ -559,6 +560,14 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         htmlAttrs['aria-checked'] = isActiveRadio ? 'true' : 'false';
       }
 
+      const optionLabelOptions = {
+        id: buttonId,
+        label: b.text,
+        startContent: b.startContent,
+        endContent: b.endContent,
+        description: b.description,
+      };
+
       return (
         <button
           {...htmlAttrs}
@@ -580,7 +589,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         >
           <span class="action-sheet-button-inner">
             {b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}
-            {b.text}
+            {renderOptionLabel(optionLabelOptions, 'action-sheet-button-label')}
           </span>
           {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
         </button>
diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts
index 8356aaede43..b79a78cba2d 100644
--- a/core/src/components/alert/alert-interface.ts
+++ b/core/src/components/alert/alert-interface.ts
@@ -25,7 +25,7 @@ export interface AlertInput {
   /**
    * The label text to display next to the input, if the input type is `radio` or `checkbox`.
    */
-  label?: string;
+  label?: string | HTMLElement;
   checked?: boolean;
   disabled?: boolean;
   id?: string;
@@ -35,6 +35,9 @@ export interface AlertInput {
   cssClass?: string | string[];
   attributes?: { [key: string]: any };
   tabindex?: number;
+  startContent?: HTMLElement;
+  endContent?: HTMLElement;
+  description?: string;
 }
 
 type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };
diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.common.scss
similarity index 95%
rename from core/src/components/alert/alert.scss
rename to core/src/components/alert/alert.common.scss
index 9948a4127a9..84e35eca5c3 100644
--- a/core/src/components/alert/alert.scss
+++ b/core/src/components/alert/alert.common.scss
@@ -247,3 +247,21 @@ textarea.alert-input {
   min-height: $alert-input-min-height;
   resize: none;
 }
+
+// Alert Button: Select Option
+// --------------------------------------------------
+
+.alert-radio-label,
+.alert-checkbox-label {
+  display: flex;
+
+  align-items: center;
+}
+
+.select-option-content {
+  flex: 1;
+}
+
+.select-option-description {
+  display: block;
+}
diff --git a/core/src/components/alert/alert.ionic.scss b/core/src/components/alert/alert.ionic.scss
new file mode 100644
index 00000000000..3c54136b477
--- /dev/null
+++ b/core/src/components/alert/alert.ionic.scss
@@ -0,0 +1,23 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./alert.common";
+@use "./alert.md" as alert-md;
+
+// Ionic Alert
+// --------------------------------------------------
+
+// Alert: Select Option
+// --------------------------------------------------
+
+.alert-radio-label,
+.alert-checkbox-label {
+  gap: globals.$ion-space-300;
+}
+
+.select-option-description {
+  @include globals.typography(globals.$ion-body-md-regular);
+  @include globals.padding(0);
+
+  color: globals.$ion-text-subtle;
+
+  font-size: globals.$ion-font-size-350;
+}
diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss
index 714efc03baf..2671dc0940b 100644
--- a/core/src/components/alert/alert.ios.scss
+++ b/core/src/components/alert/alert.ios.scss
@@ -1,4 +1,4 @@
-@import "./alert";
+@import "./alert.native";
 @import "./alert.ios.vars";
 
 // iOS Alert
diff --git a/core/src/components/alert/alert.md.scss b/core/src/components/alert/alert.md.scss
index 5ac468c760f..2fbd0fd8775 100644
--- a/core/src/components/alert/alert.md.scss
+++ b/core/src/components/alert/alert.md.scss
@@ -1,4 +1,4 @@
-@import "./alert";
+@import "./alert.native";
 @import "./alert.md.vars";
 
 // Material Design Alert
diff --git a/core/src/components/alert/alert.native.scss b/core/src/components/alert/alert.native.scss
new file mode 100644
index 00000000000..e2d5a87b8a5
--- /dev/null
+++ b/core/src/components/alert/alert.native.scss
@@ -0,0 +1,20 @@
+@use "../../themes/native/native.theme.default" as native;
+@use "../../themes/mixins" as mixins;
+@use "../../themes/functions.font" as font;
+@use "./alert.common";
+
+// Alert: Native
+// --------------------------------------------------
+
+.alert-radio-label,
+.alert-checkbox-label {
+  gap: 12px;
+}
+
+.select-option-description {
+  @include mixins.padding(5px, 0, 0, 0);
+
+  color: native.$text-color-step-300;
+
+  font-size: font.dynamic-font(12px);
+}
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index e4e98b67a42..c2c44f6f2e8 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -19,6 +19,7 @@ import {
   setOverlayId,
 } from '@utils/overlays';
 import { sanitizeDOMString } from '@utils/sanitization';
+import { renderOptionLabel } from '@utils/select-option-render';
 import { getClassMap } from '@utils/theme';
 
 import { config } from '../../global/config';
@@ -44,7 +45,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
   styleUrls: {
     ios: 'alert.ios.scss',
     md: 'alert.md.scss',
-    ionic: 'alert.md.scss',
+    ionic: 'alert.ionic.scss',
   },
   scoped: true,
 })
@@ -346,6 +347,9 @@ export class Alert implements ComponentInterface, OverlayInterface {
           cssClass: i.cssClass ?? '',
           attributes: i.attributes || {},
           tabindex: i.type === 'radio' && i !== focusable ? -1 : 0,
+          startContent: i.startContent,
+          endContent: i.endContent,
+          description: i.description,
         } as AlertInput)
     );
   }
@@ -569,33 +573,43 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
     return (
       <div class="alert-checkbox-group">
-        {inputs.map((i) => (
-          <button
-            type="button"
-            onClick={() => this.cbClick(i)}
-            aria-checked={`${i.checked}`}
-            id={i.id}
-            disabled={i.disabled}
-            tabIndex={i.tabindex}
-            role="checkbox"
-            class={{
-              ...getClassMap(i.cssClass),
-              'alert-tappable': true,
-              'alert-checkbox': true,
-              'alert-checkbox-button': true,
-              'ion-focusable': true,
-              'alert-checkbox-button-disabled': i.disabled || false,
-            }}
-          >
-            <div class="alert-button-inner">
-              <div class="alert-checkbox-icon">
-                <div class="alert-checkbox-inner"></div>
+        {inputs.map((i) => {
+          const optionLabelOptions = {
+            id: i.id!,
+            label: i.label,
+            startContent: i.startContent,
+            endContent: i.endContent,
+            description: i.description,
+          };
+
+          return (
+            <button
+              type="button"
+              onClick={() => this.cbClick(i)}
+              aria-checked={`${i.checked}`}
+              id={i.id}
+              disabled={i.disabled}
+              tabIndex={i.tabindex}
+              role="checkbox"
+              class={{
+                ...getClassMap(i.cssClass),
+                'alert-tappable': true,
+                'alert-checkbox': true,
+                'alert-checkbox-button': true,
+                'ion-focusable': true,
+                'alert-checkbox-button-disabled': i.disabled || false,
+              }}
+            >
+              <div class="alert-button-inner">
+                <div class="alert-checkbox-icon">
+                  <div class="alert-checkbox-inner"></div>
+                </div>
+                {renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')}
               </div>
-              <div class="alert-checkbox-label">{i.label}</div>
-            </div>
-            {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
-          </button>
-        ))}
+              {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+            </button>
+          );
+        })}
       </div>
     );
   }
@@ -609,32 +623,42 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
     return (
       <div class="alert-radio-group" role="radiogroup" aria-activedescendant={this.activeId}>
-        {inputs.map((i) => (
-          <button
-            type="button"
-            onClick={() => this.rbClick(i)}
-            aria-checked={`${i.checked}`}
-            disabled={i.disabled}
-            id={i.id}
-            tabIndex={i.tabindex}
-            class={{
-              ...getClassMap(i.cssClass),
-              'alert-radio-button': true,
-              'alert-tappable': true,
-              'alert-radio': true,
-              'ion-focusable': true,
-              'alert-radio-button-disabled': i.disabled || false,
-            }}
-            role="radio"
-          >
-            <div class="alert-button-inner">
-              <div class="alert-radio-icon">
-                <div class="alert-radio-inner"></div>
+        {inputs.map((i) => {
+          const optionLabelOptions = {
+            id: i.id!,
+            label: i.label,
+            startContent: i.startContent,
+            endContent: i.endContent,
+            description: i.description,
+          };
+
+          return (
+            <button
+              type="button"
+              onClick={() => this.rbClick(i)}
+              aria-checked={`${i.checked}`}
+              disabled={i.disabled}
+              id={i.id}
+              tabIndex={i.tabindex}
+              class={{
+                ...getClassMap(i.cssClass),
+                'alert-radio-button': true,
+                'alert-tappable': true,
+                'alert-radio': true,
+                'ion-focusable': true,
+                'alert-radio-button-disabled': i.disabled || false,
+              }}
+              role="radio"
+            >
+              <div class="alert-button-inner">
+                <div class="alert-radio-icon">
+                  <div class="alert-radio-inner"></div>
+                </div>
+                {renderOptionLabel(optionLabelOptions, 'alert-radio-label')}
               </div>
-              <div class="alert-radio-label">{i.label}</div>
-            </div>
-          </button>
-        ))}
+            </button>
+          );
+        })}
       </div>
     );
   }
diff --git a/core/src/components/select-modal/select-modal-interface.ts b/core/src/components/select-modal/select-modal-interface.ts
index 2005400cb82..8ed968c3d12 100644
--- a/core/src/components/select-modal/select-modal-interface.ts
+++ b/core/src/components/select-modal/select-modal-interface.ts
@@ -1,8 +1,11 @@
 export interface SelectModalOption {
-  text: string;
+  text: string | HTMLElement;
   value: string;
   disabled: boolean;
   checked: boolean;
   cssClass?: string | string[];
   handler?: (value: any) => boolean | void | { [key: string]: any };
+  startContent?: HTMLElement;
+  endContent?: HTMLElement;
+  description?: string;
 }
diff --git a/core/src/components/select-modal/select-modal.common.scss b/core/src/components/select-modal/select-modal.common.scss
index 683ae23faeb..3bbb48b557d 100644
--- a/core/src/components/select-modal/select-modal.common.scss
+++ b/core/src/components/select-modal/select-modal.common.scss
@@ -1,3 +1,19 @@
+// Select Modal
+// --------------------------------------------------
+
 :host {
   height: 100%;
 }
+
+// Select Modal: Select Option
+// --------------------------------------------------
+
+.select-option-label {
+  display: flex;
+
+  align-items: center;
+}
+
+.select-option-description {
+  display: block;
+}
diff --git a/core/src/components/select-modal/select-modal.ionic.scss b/core/src/components/select-modal/select-modal.ionic.scss
index 23d7705b660..ca137a075d3 100644
--- a/core/src/components/select-modal/select-modal.ionic.scss
+++ b/core/src/components/select-modal/select-modal.ionic.scss
@@ -77,3 +77,18 @@ ion-content {
     --background-focused-opacity: 1;
   }
 }
+
+// Select Modal: Select Option
+// --------------------------------------------------
+
+.select-option-label {
+  gap: globals.$ion-space-300;
+}
+
+.select-option-description {
+  @include globals.typography(globals.$ion-body-md-regular);
+
+  color: globals.$ion-text-subtle;
+
+  font-size: globals.$ion-font-size-350;
+}
diff --git a/core/src/components/select-modal/select-modal.ios.scss b/core/src/components/select-modal/select-modal.ios.scss
index eea8d57f0ba..abac9c8220b 100644
--- a/core/src/components/select-modal/select-modal.ios.scss
+++ b/core/src/components/select-modal/select-modal.ios.scss
@@ -1,4 +1,4 @@
-@import "./select-modal.common";
+@import "./select-modal.native";
 @import "../item/item.ios.vars";
 @import "../radio/radio.ios.vars";
 
diff --git a/core/src/components/select-modal/select-modal.md.scss b/core/src/components/select-modal/select-modal.md.scss
index 505ea2a061c..260f6aba5be 100644
--- a/core/src/components/select-modal/select-modal.md.scss
+++ b/core/src/components/select-modal/select-modal.md.scss
@@ -1,4 +1,4 @@
-@import "./select-modal.common";
+@import "./select-modal.native";
 @import "../../themes/mixins.scss";
 @import "../item/item.md.vars";
 
diff --git a/core/src/components/select-modal/select-modal.native.scss b/core/src/components/select-modal/select-modal.native.scss
new file mode 100644
index 00000000000..29b81819fcf
--- /dev/null
+++ b/core/src/components/select-modal/select-modal.native.scss
@@ -0,0 +1,19 @@
+@use "../../themes/native/native.theme.default" as native;
+@use "../../themes/mixins" as mixins;
+@use "../../themes/functions.font" as font;
+@use "./select-modal.common";
+
+// Select Modal: Native
+// --------------------------------------------------
+
+.select-option-label {
+  gap: 12px;
+}
+
+.select-option-description {
+  @include mixins.padding(5px, 0, 0, 0);
+
+  color: native.$text-color-step-300;
+
+  font-size: font.dynamic-font(12px);
+}
diff --git a/core/src/components/select-modal/select-modal.tsx b/core/src/components/select-modal/select-modal.tsx
index c277c194da8..477e42b1c16 100644
--- a/core/src/components/select-modal/select-modal.tsx
+++ b/core/src/components/select-modal/select-modal.tsx
@@ -2,6 +2,7 @@ import { getIonMode } from '@global/ionic-global';
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, forceUpdate, h } from '@stencil/core';
 import { safeCall } from '@utils/overlays';
+import { renderOptionLabel } from '@utils/select-option-render';
 import { getClassMap, hostContext } from '@utils/theme';
 
 import type { CheckboxCustomEvent } from '../checkbox/checkbox-interface';
@@ -92,66 +93,86 @@ export class SelectModal implements ComponentInterface {
 
     return (
       <ion-radio-group value={checked} onIonChange={(ev) => this.callOptionHandler(ev)}>
-        {this.options.map((option) => (
-          <ion-item
-            lines="none"
-            class={{
-              // TODO FW-4784
-              'item-radio-checked': option.value === checked,
-              ...getClassMap(option.cssClass),
-            }}
-          >
-            <ion-radio
-              value={option.value}
-              disabled={option.disabled}
-              justify="start"
-              labelPlacement="end"
-              onClick={() => this.closeModal()}
-              onKeyUp={(ev) => {
-                if (ev.key === ' ') {
-                  /**
-                   * Selecting a radio option with keyboard navigation,
-                   * either through the Enter or Space keys, should
-                   * dismiss the modal.
-                   */
-                  this.closeModal();
-                }
+        {this.options.map((option, index) => {
+          const optionLabelOptions = {
+            id: `modal-option-${index}`,
+            label: option.text,
+            startContent: option.startContent,
+            endContent: option.endContent,
+            description: option.description,
+          };
+
+          return (
+            <ion-item
+              lines="none"
+              class={{
+                // TODO FW-4784
+                'item-radio-checked': option.value === checked,
+                ...getClassMap(option.cssClass),
               }}
             >
-              {option.text}
-            </ion-radio>
-          </ion-item>
-        ))}
+              <ion-radio
+                value={option.value}
+                disabled={option.disabled}
+                justify="start"
+                labelPlacement="end"
+                onClick={() => this.closeModal()}
+                onKeyUp={(ev) => {
+                  if (ev.key === ' ') {
+                    /**
+                     * Selecting a radio option with keyboard navigation,
+                     * either through the Enter or Space keys, should
+                     * dismiss the modal.
+                     */
+                    this.closeModal();
+                  }
+                }}
+              >
+                {renderOptionLabel(optionLabelOptions, 'select-option-label')}
+              </ion-radio>
+            </ion-item>
+          );
+        })}
       </ion-radio-group>
     );
   }
 
   private renderCheckboxOptions() {
-    return this.options.map((option) => (
-      <ion-item
-        class={{
-          // TODO FW-4784
-          'item-checkbox-checked': option.checked,
-          ...getClassMap(option.cssClass),
-        }}
-      >
-        <ion-checkbox
-          value={option.value}
-          disabled={option.disabled}
-          checked={option.checked}
-          justify="start"
-          labelPlacement="end"
-          onIonChange={(ev) => {
-            this.setChecked(ev);
-            this.callOptionHandler(ev);
+    return this.options.map((option, index) => {
+      const optionLabelOptions = {
+        id: `modal-option-${index}`,
+        label: option.text,
+        startContent: option.startContent,
+        endContent: option.endContent,
+        description: option.description,
+      };
+
+      return (
+        <ion-item
+          class={{
             // TODO FW-4784
-            forceUpdate(this);
+            'item-checkbox-checked': option.checked,
+            ...getClassMap(option.cssClass),
           }}
         >
-          {option.text}
-        </ion-checkbox>
-      </ion-item>
-    ));
+          <ion-checkbox
+            value={option.value}
+            disabled={option.disabled}
+            checked={option.checked}
+            justify="start"
+            labelPlacement="end"
+            onIonChange={(ev) => {
+              this.setChecked(ev);
+              this.callOptionHandler(ev);
+              // TODO FW-4784
+              forceUpdate(this);
+            }}
+          >
+            {renderOptionLabel(optionLabelOptions, 'select-option-label')}
+          </ion-checkbox>
+        </ion-item>
+      );
+    });
   }
 
   render() {
diff --git a/core/src/components/select-option/select-option.tsx b/core/src/components/select-option/select-option.tsx
index b088f4ea72e..dea73b4fd3c 100644
--- a/core/src/components/select-option/select-option.tsx
+++ b/core/src/components/select-option/select-option.tsx
@@ -27,8 +27,14 @@ export class SelectOption implements ComponentInterface {
    */
   @Prop() value?: any | null;
 
+  /**
+   * Text that is placed underneath the option text to provide additional details about the option.
+   */
+  @Prop() description?: string;
+
   render() {
     const theme = getIonTheme(this);
+
     return (
       <Host
         class={{
@@ -36,7 +42,11 @@ export class SelectOption implements ComponentInterface {
         }}
         role="option"
         id={this.inputId}
-      ></Host>
+      >
+        <slot name="start"></slot>
+        <slot></slot>
+        <slot name="end"></slot>
+      </Host>
     );
   }
 }
diff --git a/core/src/components/select-popover/select-popover-interface.ts b/core/src/components/select-popover/select-popover-interface.ts
index 1787234ae75..b0a30bbbf13 100644
--- a/core/src/components/select-popover/select-popover-interface.ts
+++ b/core/src/components/select-popover/select-popover-interface.ts
@@ -1,8 +1,11 @@
 export interface SelectPopoverOption {
-  text: string;
+  text: string | HTMLElement;
   value: string;
   disabled: boolean;
   checked: boolean;
   cssClass?: string | string[];
   handler?: (value: any) => boolean | void | { [key: string]: any };
+  startContent?: HTMLElement;
+  endContent?: HTMLElement;
+  description?: string;
 }
diff --git a/core/src/components/select-popover/select-popover.scss b/core/src/components/select-popover/select-popover.common.scss
similarity index 59%
rename from core/src/components/select-popover/select-popover.scss
rename to core/src/components/select-popover/select-popover.common.scss
index de7cb783300..cedc62bbf3a 100644
--- a/core/src/components/select-popover/select-popover.scss
+++ b/core/src/components/select-popover/select-popover.common.scss
@@ -1,5 +1,8 @@
 @import "../../themes/native/native.globals";
 
+// Select Popover
+// --------------------------------------------------
+
 :host ion-list {
   @include margin(0);
 }
@@ -18,3 +21,16 @@ ion-label {
 :host {
   overflow-y: auto;
 }
+
+// Select Popover: Select Option
+// --------------------------------------------------
+
+.select-option-label {
+  display: flex;
+
+  align-items: center;
+}
+
+.select-option-description {
+  display: block;
+}
diff --git a/core/src/components/select-popover/select-popover.ionic.scss b/core/src/components/select-popover/select-popover.ionic.scss
new file mode 100644
index 00000000000..c8321bb30eb
--- /dev/null
+++ b/core/src/components/select-popover/select-popover.ionic.scss
@@ -0,0 +1,22 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./select-popover.common";
+@use "./select-popover.md" as select-popover-md;
+
+// Ionic Select Popover
+// --------------------------------------------------
+
+// Select Modal: Select Option
+// --------------------------------------------------
+
+.select-option-label {
+  gap: globals.$ion-space-300;
+}
+
+.select-option-description {
+  @include globals.typography(globals.$ion-body-md-regular);
+  @include globals.padding(0);
+
+  color: globals.$ion-text-subtle;
+
+  font-size: globals.$ion-font-size-350;
+}
diff --git a/core/src/components/select-popover/select-popover.ios.scss b/core/src/components/select-popover/select-popover.ios.scss
index 3330a261d80..de3cfea6135 100644
--- a/core/src/components/select-popover/select-popover.ios.scss
+++ b/core/src/components/select-popover/select-popover.ios.scss
@@ -1,2 +1,2 @@
-@import "./select-popover";
+@import "./select-popover.native";
 @import "./select-popover.ios.vars";
diff --git a/core/src/components/select-popover/select-popover.md.scss b/core/src/components/select-popover/select-popover.md.scss
index 001b0123632..c7728bcaf04 100644
--- a/core/src/components/select-popover/select-popover.md.scss
+++ b/core/src/components/select-popover/select-popover.md.scss
@@ -1,4 +1,4 @@
-@import "./select-popover";
+@import "./select-popover.native";
 @import "./select-popover.md.vars";
 
 ion-list ion-radio::part(container) {
diff --git a/core/src/components/select-popover/select-popover.native.scss b/core/src/components/select-popover/select-popover.native.scss
new file mode 100644
index 00000000000..0b52fafe932
--- /dev/null
+++ b/core/src/components/select-popover/select-popover.native.scss
@@ -0,0 +1,19 @@
+@use "../../themes/native/native.theme.default" as native;
+@use "../../themes/mixins" as mixins;
+@use "../../themes/functions.font" as font;
+@use "./select-popover.common";
+
+// Select Popover: Native
+// --------------------------------------------------
+
+.select-option-label {
+  gap: 12px;
+}
+
+.select-option-description {
+  @include mixins.padding(5px, 0, 0, 0);
+
+  color: native.$text-color-step-300;
+
+  font-size: font.dynamic-font(12px);
+}
diff --git a/core/src/components/select-popover/select-popover.tsx b/core/src/components/select-popover/select-popover.tsx
index efba1c8d9c1..7b5bb28b15c 100644
--- a/core/src/components/select-popover/select-popover.tsx
+++ b/core/src/components/select-popover/select-popover.tsx
@@ -1,6 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Element, Component, Host, Prop, h, forceUpdate } from '@stencil/core';
 import { safeCall } from '@utils/overlays';
+import { renderOptionLabel } from '@utils/select-option-render';
 import { getClassMap } from '@utils/theme';
 
 import { getIonTheme } from '../../global/ionic-global';
@@ -20,7 +21,7 @@ import type { SelectPopoverOption } from './select-popover-interface';
   styleUrls: {
     ios: 'select-popover.ios.scss',
     md: 'select-popover.md.scss',
-    ionic: 'select-popover.md.scss',
+    ionic: 'select-popover.ionic.scss',
   },
   scoped: true,
 })
@@ -119,31 +120,41 @@ export class SelectPopover implements ComponentInterface {
   }
 
   renderCheckboxOptions(options: SelectPopoverOption[]) {
-    return options.map((option) => (
-      <ion-item
-        class={{
-          // TODO FW-4784
-          'item-checkbox-checked': option.checked,
-          ...getClassMap(option.cssClass),
-        }}
-      >
-        <ion-checkbox
-          value={option.value}
-          disabled={option.disabled}
-          checked={option.checked}
-          justify="start"
-          labelPlacement="end"
-          onIonChange={(ev) => {
-            this.setChecked(ev);
-            this.callOptionHandler(ev);
+    return options.map((option, index) => {
+      const optionLabelOptions = {
+        id: `popover-option-${index}`,
+        label: option.text,
+        startContent: option.startContent,
+        endContent: option.endContent,
+        description: option.description,
+      };
+
+      return (
+        <ion-item
+          class={{
             // TODO FW-4784
-            forceUpdate(this);
+            'item-checkbox-checked': option.checked,
+            ...getClassMap(option.cssClass),
           }}
         >
-          {option.text}
-        </ion-checkbox>
-      </ion-item>
-    ));
+          <ion-checkbox
+            value={option.value}
+            disabled={option.disabled}
+            checked={option.checked}
+            justify="start"
+            labelPlacement="end"
+            onIonChange={(ev) => {
+              this.setChecked(ev);
+              this.callOptionHandler(ev);
+              // TODO FW-4784
+              forceUpdate(this);
+            }}
+          >
+            {renderOptionLabel(optionLabelOptions, 'select-option-label')}
+          </ion-checkbox>
+        </ion-item>
+      );
+    });
   }
 
   renderRadioOptions(options: SelectPopoverOption[]) {
@@ -151,33 +162,43 @@ export class SelectPopover implements ComponentInterface {
 
     return (
       <ion-radio-group value={checked} onIonChange={(ev) => this.callOptionHandler(ev)}>
-        {options.map((option) => (
-          <ion-item
-            class={{
-              // TODO FW-4784
-              'item-radio-checked': option.value === checked,
-              ...getClassMap(option.cssClass),
-            }}
-          >
-            <ion-radio
-              value={option.value}
-              disabled={option.disabled}
-              onClick={() => this.dismissParentPopover()}
-              onKeyUp={(ev) => {
-                if (ev.key === ' ') {
-                  /**
-                   * Selecting a radio option with keyboard navigation,
-                   * either through the Enter or Space keys, should
-                   * dismiss the popover.
-                   */
-                  this.dismissParentPopover();
-                }
+        {options.map((option, index) => {
+          const optionLabelOptions = {
+            id: `popover-option-${index}`,
+            label: option.text,
+            startContent: option.startContent,
+            endContent: option.endContent,
+            description: option.description,
+          };
+
+          return (
+            <ion-item
+              class={{
+                // TODO FW-4784
+                'item-radio-checked': option.value === checked,
+                ...getClassMap(option.cssClass),
               }}
             >
-              {option.text}
-            </ion-radio>
-          </ion-item>
-        ))}
+              <ion-radio
+                value={option.value}
+                disabled={option.disabled}
+                onClick={() => this.dismissParentPopover()}
+                onKeyUp={(ev) => {
+                  if (ev.key === ' ') {
+                    /**
+                     * Selecting a radio option with keyboard navigation,
+                     * either through the Enter or Space keys, should
+                     * dismiss the popover.
+                     */
+                    this.dismissParentPopover();
+                  }
+                }}
+              >
+                {renderOptionLabel(optionLabelOptions, 'select-option-label')}
+              </ion-radio>
+            </ion-item>
+          );
+        })}
       </ion-radio-group>
     );
   }
diff --git a/core/src/components/select/select.common.scss b/core/src/components/select/select.common.scss
index 43f3d13399f..b3866c6f15b 100644
--- a/core/src/components/select/select.common.scss
+++ b/core/src/components/select/select.common.scss
@@ -25,6 +25,13 @@
    * @prop --border-width: Width of the select border
    *
    * @prop --ripple-color: The color of the ripple effect on MD mode.
+   *
+   * @prop --select-text-media-width: The width of media (icons/images) in the select text.
+   * @prop --select-text-media-height: The height of media (icons/images) in the select text.
+   * @prop --select-text-media-border-width: The border width of media (icons/images) in the select text.
+   * @prop --select-text-media-border-color: The border color of media (icons/images) in the select text.
+   * @prop --select-text-media-border-radius: The border radius of media (icons/images) in the select text.
+   * @prop --select-text-media-border-style: The border style of media (icons/images) in the select text.
    */
   --padding-top: 0px;
   --padding-end: 0px;
@@ -36,6 +43,8 @@
   --highlight-color-focused: #{ion-color(primary, base)};
   --highlight-color-valid: #{ion-color(success, base)};
   --highlight-color-invalid: #{ion-color(danger, base)};
+  --select-text-media-height: 1.5em;
+  --select-text-media-width: 1.5em;
 
   /**
    * This is a private API that is used to switch
@@ -152,6 +161,21 @@ button {
   overflow: hidden;
 }
 
+.select-text img,
+.select-text ion-img,
+.select-text ion-icon,
+.select-text ion-thumbnail,
+.select-text ion-avatar {
+  @include mixins.border-radius(var(--select-text-media-border-radius));
+
+  width: var(--select-text-media-width);
+  height: var(--select-text-media-height);
+
+  border-width: var(--select-text-media-border-width);
+  border-style: var(--select-text-media-border-style);
+  border-color: var(--select-text-media-border-color);
+}
+
 // Select Wrapper
 // --------------------------------------------------
 
diff --git a/core/src/components/select/select.ionic.scss b/core/src/components/select/select.ionic.scss
index 2ba5f722406..5f0bf27977f 100644
--- a/core/src/components/select/select.ionic.scss
+++ b/core/src/components/select/select.ionic.scss
@@ -50,6 +50,15 @@
   color: globals.$ion-text-default;
 }
 
+/**
+ * If the select text contains rich content, we want to add some
+ * spacing between the items without changing the display to prevent
+ * losing the ellipsis behavior.
+ */
+.select-text > * {
+  margin-inline-start: globals.$ion-space-200;
+}
+
 // Select Label
 // ----------------------------------------------------------------
 
diff --git a/core/src/components/select/select.native.scss b/core/src/components/select/select.native.scss
index 876fcb1579f..262b6efdbee 100644
--- a/core/src/components/select/select.native.scss
+++ b/core/src/components/select/select.native.scss
@@ -88,6 +88,15 @@
   min-width: 16px;
 }
 
+/**
+ * If the select text contains rich content, we want to add some
+ * spacing between the items without changing the display to prevent
+ * losing the ellipsis behavior.
+ */
+.select-text > * {
+  margin-inline-start: 8px;
+}
+
 // Select Label
 // ----------------------------------------------------------------
 
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 8071434ba8c..41836a95f96 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -1,6 +1,7 @@
 import caretDownRegular from '@phosphor-icons/core/assets/regular/caret-down.svg';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
+import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
 import type { NotchController } from '@utils/forms';
 import { compareOptions, createNotchController, isOptionSelected, checkInvalidState } from '@utils/forms';
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from '@utils/helpers';
@@ -9,6 +10,7 @@ import { printIonWarning } from '@utils/logging';
 import { actionSheetController, alertController, popoverController, modalController } from '@utils/overlays';
 import type { OverlaySelect } from '@utils/overlays-interface';
 import { isRTL } from '@utils/rtl';
+import { sanitizeDOMString } from '@utils/sanitization';
 import { createColorClasses, hostContext } from '@utils/theme';
 import { watchForOptions } from '@utils/watch-options';
 import { caretDownSharp, chevronExpand } from 'ionicons/icons';
@@ -72,8 +74,8 @@ export class Select implements ComponentInterface {
   private nativeWrapperEl: HTMLElement | undefined;
   private notchSpacerEl: HTMLElement | undefined;
   private validationObserver?: MutationObserver;
-
   private notchController?: NotchController;
+  private customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
 
   @Element() el!: HTMLIonSelectElement;
 
@@ -576,10 +578,15 @@ export class Select implements ComponentInterface {
         .join(' ');
       const optClass = `${OPTION_CLASS} ${copyClasses}`;
       const isSelected = isOptionSelected(selectValue, value, this.compareWith);
+      const text = this.customHTMLEnabled ? getOptionContent(option) : option.textContent;
+      const startContent = this.customHTMLEnabled
+        ? (getOptionContent(option, 'start') as HTMLElement | null)
+        : undefined;
+      const endContent = this.customHTMLEnabled ? (getOptionContent(option, 'end') as HTMLElement | null) : undefined;
 
       return {
         role: isSelected ? 'selected' : '',
-        text: option.textContent,
+        text: text ?? '',
         cssClass: optClass,
         handler: () => {
           this.setValue(value);
@@ -588,6 +595,9 @@ export class Select implements ComponentInterface {
           'aria-checked': isSelected ? 'true' : 'false',
           role: 'radio',
         },
+        startContent: startContent ?? undefined,
+        endContent: endContent ?? undefined,
+        description: option.description,
       } as ActionSheetButton;
     });
 
@@ -616,14 +626,22 @@ export class Select implements ComponentInterface {
         .filter((cls) => cls !== 'hydrated')
         .join(' ');
       const optClass = `${OPTION_CLASS} ${copyClasses}`;
+      const label = this.customHTMLEnabled ? getOptionContent(option) : option.textContent;
+      const startContent = this.customHTMLEnabled
+        ? (getOptionContent(option, 'start') as HTMLElement | null)
+        : undefined;
+      const endContent = this.customHTMLEnabled ? (getOptionContent(option, 'end') as HTMLElement | null) : undefined;
 
       return {
         type: inputType,
         cssClass: optClass,
-        label: option.textContent || '',
+        label: label ?? '',
         value,
         checked: isOptionSelected(selectValue, value, this.compareWith),
         disabled: option.disabled,
+        startContent: startContent ?? undefined,
+        endContent: endContent ?? undefined,
+        description: option.description,
       };
     });
 
@@ -639,9 +657,14 @@ export class Select implements ComponentInterface {
         .filter((cls) => cls !== 'hydrated')
         .join(' ');
       const optClass = `${OPTION_CLASS} ${copyClasses}`;
+      const text = this.customHTMLEnabled ? getOptionContent(option) : option.textContent;
+      const startContent = this.customHTMLEnabled
+        ? (getOptionContent(option, 'start') as HTMLElement | null)
+        : undefined;
+      const endContent = this.customHTMLEnabled ? (getOptionContent(option, 'end') as HTMLElement | null) : undefined;
 
       return {
-        text: option.textContent || '',
+        text: text ?? '',
         cssClass: optClass,
         value,
         checked: isOptionSelected(selectValue, value, this.compareWith),
@@ -652,6 +675,9 @@ export class Select implements ComponentInterface {
             this.close();
           }
         },
+        startContent: startContent ?? undefined,
+        endContent: endContent ?? undefined,
+        description: option.description,
       };
     });
 
@@ -879,12 +905,18 @@ export class Select implements ComponentInterface {
     return;
   }
 
-  private getText(): string {
+  /**
+   * Returns the text to display in the select based on the selected value.
+   *
+   * @param useHTML If `true`, the returned text will include any custom HTML content from the selected option. If `false`, the returned text will be plain text without any HTML. Defaults to `false`.
+   * @returns The text to display in the select, either with or without HTML based on the `useHTML` parameter.
+   */
+  private getText(useHTML = false): string {
     const selectedText = this.selectedText;
     if (selectedText != null && selectedText !== '') {
       return selectedText;
     }
-    return generateText(this.childOpts, this.value, this.compareWith);
+    return generateText(this.childOpts, this.value, this.compareWith, useHTML);
   }
 
   private setFocus() {
@@ -1069,7 +1101,7 @@ export class Select implements ComponentInterface {
   private renderSelectText() {
     const { placeholder } = this;
 
-    const displayValue = this.getText();
+    const displayValue = this.getText(true);
 
     let addPlaceholderClass = false;
     let selectText = displayValue;
@@ -1085,6 +1117,10 @@ export class Select implements ComponentInterface {
 
     const textPart = addPlaceholderClass ? 'placeholder' : 'text';
 
+    if (this.customHTMLEnabled) {
+      return <div aria-hidden="true" class={selectTextClasses} part={textPart} innerHTML={selectText}></div>;
+    }
+
     return (
       <div aria-hidden="true" class={selectTextClasses} part={textPart}>
         {selectText}
@@ -1109,6 +1145,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 +1448,113 @@ 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;
+  }
+
+  // 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 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <script>
+      window.Ionic = {
+        config: {
+          innerHTMLTemplatesEnabled: true,
+        },
+      };
+    </script>
+    <style>
+      .native-img {
+        max-height: 20px;
+        width: auto;
+        object-fit: contain;
+      }
+
+      .span-style {
+        font-size: 12px;
+        color: var(--ion-color-primary);
+        padding-inline-start: 4px;
+      }
+    </style>
   </head>
 
   <body>
@@ -30,31 +51,59 @@
 
           <ion-item>
             <ion-select id="alert-select" label="Alert" placeholder="Select one" interface="alert">
-              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="apples" description="Choose me!">
+                <ion-avatar id="avatar" slot="start" size="large">
+                  <img src="/src/components/avatar/test/avatar.svg" />
+                </ion-avatar>
+                Apples
+                <span class="span-style">This is a span element</span>
+                <ion-badge slot="end">NEW</ion-badge>
+              </ion-select-option>
               <ion-select-option value="oranges">Oranges</ion-select-option>
               <ion-select-option value="pears">Pears</ion-select-option>
             </ion-select>
           </ion-item>
 
           <ion-item>
-            <ion-select label="Popover" placeholder="Select one" interface="popover">
-              <ion-select-option value="apples">Apples</ion-select-option>
+            <ion-select id="popover-select" label="Popover" placeholder="Select one" interface="popover">
+              <ion-select-option value="apples" description="Choose me!">
+                <ion-avatar id="avatar" slot="start" size="large">
+                  <img src="/src/components/avatar/test/avatar.svg" />
+                </ion-avatar>
+                Apples
+                <span class="span-style">This is a span element</span>
+                <ion-badge slot="end">NEW</ion-badge>
+              </ion-select-option>
               <ion-select-option value="oranges">Oranges</ion-select-option>
               <ion-select-option value="pears">Pears</ion-select-option>
             </ion-select>
           </ion-item>
 
           <ion-item>
-            <ion-select label="Action Sheet" placeholder="Select one" interface="action-sheet">
-              <ion-select-option value="apples">Apples</ion-select-option>
+            <ion-select id="action-sheet-select" label="Action Sheet" placeholder="Select one" interface="action-sheet">
+              <ion-select-option value="apples" description="Choose me!">
+                <ion-avatar id="avatar" slot="start" size="large">
+                  <img src="/src/components/avatar/test/avatar.svg" />
+                </ion-avatar>
+                Apples
+                <span class="span-style">This is a span element</span>
+                <ion-badge slot="end">NEW</ion-badge>
+              </ion-select-option>
               <ion-select-option value="oranges">Oranges</ion-select-option>
               <ion-select-option value="pears">Pears</ion-select-option>
             </ion-select>
           </ion-item>
 
           <ion-item>
-            <ion-select label="Modal" placeholder="Select one" interface="modal">
-              <ion-select-option value="apples">Apples</ion-select-option>
+            <ion-select id="modal-select" label="Modal" placeholder="Select one" interface="modal">
+              <ion-select-option value="apples" description="Choose me!">
+                <ion-avatar id="avatar" slot="start" size="large">
+                  <img src="/src/components/avatar/test/avatar.svg" />
+                </ion-avatar>
+                Apples
+                <span class="span-style">This is a span element</span>
+                <ion-badge slot="end">NEW</ion-badge>
+              </ion-select-option>
               <ion-select-option value="oranges">Oranges</ion-select-option>
               <ion-select-option value="pears">Pears</ion-select-option>
             </ion-select>
@@ -230,8 +279,15 @@
           </ion-list-header>
 
           <ion-item>
-            <ion-select label="Alert" multiple="true" interface="alert">
-              <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
+            <ion-select id="alert-select-multiple" label="Alert" multiple="true" interface="alert">
+              <ion-select-option value="pepperoni" description="Choose me!">
+                <ion-avatar id="avatar" slot="start" size="large">
+                  <img src="/src/components/avatar/test/avatar.svg" />
+                </ion-avatar>
+                Pepperoni
+                <span class="span-style">This is a span element</span>
+                <ion-badge slot="end">NEW</ion-badge>
+              </ion-select-option>
               <ion-select-option value="bacon">Bacon</ion-select-option>
               <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
               <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
@@ -240,8 +296,15 @@
           </ion-item>
 
           <ion-item>
-            <ion-select label="Popover" multiple="true" interface="popover">
-              <ion-select-option value="bird">Bird</ion-select-option>
+            <ion-select id="popover-select-multiple" label="Popover" multiple="true" interface="popover">
+              <ion-select-option value="bird" description="Choose me!">
+                <ion-avatar id="avatar" slot="start" size="large">
+                  <img src="/src/components/avatar/test/avatar.svg" />
+                </ion-avatar>
+                Bird
+                <span class="span-style">This is a span element</span>
+                <ion-badge slot="end">NEW</ion-badge>
+              </ion-select-option>
               <ion-select-option value="cat">Cat</ion-select-option>
               <ion-select-option value="dog">Dog</ion-select-option>
               <ion-select-option value="honeybadger">Honey Badger</ion-select-option>
@@ -249,8 +312,15 @@
           </ion-item>
 
           <ion-item>
-            <ion-select label="Modal" multiple="true" interface="modal">
-              <ion-select-option value="bird">Bird</ion-select-option>
+            <ion-select id="modal-select-multiple" label="Modal" multiple="true" interface="modal">
+              <ion-select-option value="bird" description="Choose me!">
+                <ion-avatar id="avatar" slot="start" size="large">
+                  <img src="/src/components/avatar/test/avatar.svg" />
+                </ion-avatar>
+                Bird
+                <span class="span-style">This is a span element</span>
+                <ion-badge slot="end">NEW</ion-badge>
+              </ion-select-option>
               <ion-select-option value="cat">Cat</ion-select-option>
               <ion-select-option value="dog">Dog</ion-select-option>
               <ion-select-option value="honeybadger">Honey Badger</ion-select-option>
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(
+        `
+          <ion-select label="Fruits" interface="alert">
+            <ion-select-option value="apples">
+              <ion-badge slot="end">NEW</ion-badge>
+              <ion-avatar id="avatar" slot="start" size="large">
+                <img src="/src/components/avatar/test/avatar.svg" />
+              </ion-avatar>
+              Apples
+            </ion-select-option>
+          </ion-select>
+
+          <script>
+            window.Ionic = {
+              config: {
+                innerHTMLTemplatesEnabled: true,
+              },
+            };
+          </script>
+        `,
+        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..621229f53b3
--- /dev/null
+++ b/core/src/utils/select-option-render.tsx
@@ -0,0 +1,107 @@
+import { h } from '@stencil/core';
+
+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<HTMLElement, HTMLElement>();
+
+/**
+ * Renders cloned DOM content into a span 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.
+ *
+ * Uses span elements because this content may render 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.
+ */
+const renderClonedContent = (id: string, content: HTMLElement, className: string) => {
+  return (
+    <span
+      class={className}
+      key={`${className}-${id}`}
+      ref={(el) => {
+        if (el) {
+          const cached = contentCache.get(el);
+          // Skip if this element already has clones from the same source
+          if (cached === content) {
+            return;
+          }
+
+          // Clear previous content and clone new nodes
+          el.innerHTML = '';
+          Array.from(content.childNodes).forEach((n) => el.appendChild(n.cloneNode(true)));
+          contentCache.set(el, content);
+        }
+      }}
+    ></span>
+  );
+};
+
+/**
+ * Renders the label content for a select option within an overlay
+ * interface based on the presence of rich content.
+ *
+ * Uses span elements because this content may render 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.
+ */
+export const renderOptionLabel = (option: RichContentOption, className: string): HTMLElement => {
+  const { id, label, startContent, endContent, description } = option;
+  const hasRichContent = !!startContent || !!endContent || !!description;
+
+  // Render the main label
+  const labelEl =
+    typeof label === 'string' || !label ? (
+      <span key={`${className}-label-${id}`}>{label}</span>
+    ) : (
+      renderClonedContent(id, label, `${className}-text`)
+    );
+
+  if (!hasRichContent) {
+    return (
+      <span class={className} key={`${className}-${id}`}>
+        {labelEl}
+      </span>
+    );
+  }
+
+  return (
+    <span class={className} key={`${className}-${id}`}>
+      {startContent && renderClonedContent(id, startContent, 'select-option-start')}
+      <span class="select-option-content" key={`${className}-content-${id}`}>
+        {labelEl}
+        {description && (
+          <span class="select-option-description" key={`${className}-desc-${id}`}>
+            {description}
+          </span>
+        )}
+      </span>
+      {endContent && renderClonedContent(id, endContent, 'select-option-end')}
+    </span>
+  );
+};
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: '<ng-content></ng-content>',
   // 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: '<ng-content></ng-content>',
   // 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<JSX.IonSelectModal> = /*@__PURE
 
 export const IonSelectOption: StencilVueComponent<JSX.IonSelectOption> = /*@__PURE__*/ defineContainer<JSX.IonSelectOption>('ion-select-option', defineIonSelectOption, [
   'disabled',
-  'value'
+  'value',
+  'description'
 ]);