feat(select): allow HTML within options by thetaPC · Pull Request #31072 · ionic-team/ionic-framework

thetaPC · 2026-04-09T16:35:40Z

Issue number: resolves #29890

What is the current behavior?

Select only allows plain text to be passed within it's options.

What is the new behavior?

ion-select-option

Added default slot support for custom HTML content (images, avatars, icons, etc.) when innerHTMLTemplatesEnabled is true
Added start and end named slots for content that appears in the overlay interface but not in the selected text
Added description prop for text rendered below the option label in the overlay

ion-select

Selected text renders HTML content from the default slot, excluding start/end slot content
aria-label derives plain text only from the default slot, ensuring screen readers don't read slotted or element content
Added CSS variables for styling media within the selected text (--select-text-media-width, --select-text-media-height, etc.)

Overlay interfaces (alert, action-sheet, select-popover, select-modal)

All four interfaces render rich content (start, end, description, HTML label) consistently via the shared renderOptionLabel utility
Public interfaces (ActionSheetButton, AlertInput, SelectPopoverOption, SelectModalOption) are unchanged — rich content fields are on internal extended interfaces (SelectActionSheetButton, SelectAlertInput, SelectOverlayOption)
Content is sanitized via sanitizeDOMString before DOM injection to prevent XSS

Utilities

Added select-option-render.tsx: shared render utility for option labels across all overlay components
Added getOptionContent: extracts and clones slot content from ion-select-option for overlays and selected text
Added getDefaultSlotPlainText — extracts plain text from the default slot, used for labels and aria

Tests

Added E2E tests for rich content rendering across all four interfaces (single and multiple selection)
Added tests for slot positioning (start/end placement verification)
Added tests for selected text content verification (excludes slotted content)

Does this introduce a breaking change?

Yes
No

No, developers will be able to continue using plain text for select options as usual.

Other information

Preview

vercel · 2026-04-09T16:36:22Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Apr 15, 2026 11:20pm

…7137

thetaPC · 2026-04-10T18:16:06Z

+// --------------------------------------------------
+
+.action-sheet-button-label {
+  gap: 12px;


I decided to use the same value that ionic uses.

thetaPC · 2026-04-10T18:17:21Z

-            <div class="alert-button-inner">
-              <div class="alert-checkbox-icon">
-                <div class="alert-checkbox-inner"></div>
+        {inputs.map((i) => {


The only change is the addition of optionLabelOptions and renderOptionLabel

thetaPC · 2026-04-10T18:17:24Z

-            <div class="alert-button-inner">
-              <div class="alert-radio-icon">
-                <div class="alert-radio-inner"></div>
+        {inputs.map((i) => {


The only change is the addition of optionLabelOptions and renderOptionLabel

thetaPC · 2026-04-10T18:17:38Z

-                   */
-                  this.closeModal();
-                }
+        {this.options.map((option, index) => {


The only change is the addition of optionLabelOptions and renderOptionLabel

thetaPC · 2026-04-10T18:17:46Z

-          onIonChange={(ev) => {
-            this.setChecked(ev);
-            this.callOptionHandler(ev);
+    return this.options.map((option, index) => {


The only change is the addition of optionLabelOptions and renderOptionLabel

thetaPC · 2026-04-10T18:19:05Z

+  /**
+   * Text that is placed underneath the option text to provide additional details about the option.
+   */
+  @Prop() description?: string;


Description isn't being used here to display on the screen because ion-select-option isn't used to display the options, it's done through the respective interface. So description is passed to the interface.

thetaPC · 2026-04-10T18:20:34Z

+        <slot name="start"></slot>
+        <slot></slot>
+        <slot name="end"></slot>


Slots aren't being used here to display on the screen because ion-select-option isn't used to display the options, it's done through the respective interface. So slots are passed to the interface and the rendering is done with a new utility.

Even though it's not used to display here, it's still useful to include here so the docs can generate that "slots" are available for the options.

thetaPC · 2026-04-10T18:21:40Z

-          onIonChange={(ev) => {
-            this.setChecked(ev);
-            this.callOptionHandler(ev);
+    return options.map((option, index) => {


The only change is the addition of optionLabelOptions and renderOptionLabel

thetaPC · 2026-04-10T18:21:47Z

-                   */
-                  this.dismissParentPopover();
-                }
+        {options.map((option, index) => {


The only change is the addition of optionLabelOptions and renderOptionLabel

ShaneK

This is looking really good! Just some feedback on some things I noticed

thetaPC · 2026-04-15T23:26:04Z

+// --------------------------------------------------
+
+.action-sheet-button-label {
+  gap: 12px;


Based it off ionic theme

ShaneK

Looks good to me! I consider these comments to be optional side quests (nits), feel free to disregard

ShaneK · 2026-04-20T18:23:08Z

+
+import { sanitizeDOMString } from './sanitization';
+
+interface RichContentOption {


RichContentOption is declared here with id, label, startContent, endContent, description, and a separate RichContentOption in select-interface.ts has only the three content fields. Same name, different shape, no shared source. Could we export one from select-interface.ts and import it here so we can avoid drift?

ShaneK · 2026-04-20T18:27:40Z

+            <ion-select id="alert-select" label="Alert" placeholder="Select one" interface="alert">
+              <ion-select-option value="full" description="Choose me!">
+                <ion-badge slot="end">NEW</ion-badge>
+                <ion-avatar id="avatar" slot="start" size="large">


id="avatar" is repeated 35+ times on this page (lines 60, 67, 74, etc.) Duplicate IDs are invalid HTML and none of the tests query by this id. Can we drop the attribute? I assume it's just copy pasta at this point

ShaneK · 2026-04-20T18:27:52Z

+
+  // Render simple string label if there is no rich content to display
+  if (!hasRichContent && (typeof label === 'string' || !label)) {
+    // const Tag = useSpan ? 'span' : 'div';


Dead commented line, Tag is already declared at line 84. Can you drop this?

feat(select): allow HTML within options

9918f4a

github-actions bot added the package: core @ionic/core package label Apr 9, 2026

feat(select): add HTML to options

d0a8a56

github-actions bot added package: angular @ionic/angular package package: vue @ionic/vue package labels Apr 10, 2026

vercel bot deployed to Preview April 10, 2026 03:46 View deployment

refactor(many): rename files to common

d53d627

vercel bot deployed to Preview April 10, 2026 03:48 View deployment

chore(select): run build

5415cad

vercel bot deployed to Preview April 10, 2026 03:52 View deployment

thetaPC added 2 commits April 9, 2026 21:11

refactor(select): cleanup

8f3e623

Merge branch 'next' of github.com:ionic-team/ionic-framework into FW-…

f0b45d3

…7137

vercel bot deployed to Preview April 10, 2026 04:14 View deployment

chore(): run build proper

a48cf66

vercel bot deployed to Preview April 10, 2026 04:19 View deployment

thetaPC commented Apr 10, 2026

View reviewed changes

refactor(select): cleanup and tests

e9eb575

vercel bot deployed to Preview April 10, 2026 22:59 View deployment

refactor(select): select text spacing

e4bce6b

vercel bot deployed to Preview April 10, 2026 23:35 View deployment

fix(select): revert deletion

03b8351

vercel bot deployed to Preview April 11, 2026 00:59 View deployment

thetaPC marked this pull request as ready for review April 11, 2026 02:06

thetaPC requested a review from a team as a code owner April 11, 2026 02:06

thetaPC requested review from BenOsodrac and ShaneK and removed request for BenOsodrac April 11, 2026 02:06

ShaneK requested changes Apr 13, 2026

View reviewed changes

refactor(many): add internal type

cc0af05

vercel bot deployed to Preview April 14, 2026 17:08 View deployment

refactor(select): split out type

49e0e6c

vercel bot deployed to Preview April 14, 2026 17:18 View deployment

refactr(select): return string label as is

0c7e4d6

vercel bot deployed to Preview April 14, 2026 18:03 View deployment

thetaPC added 2 commits April 14, 2026 11:30

feat(select): add useSpan boolean

17e9e37

docs(select-popover): fix text

6ef2355

vercel bot deployed to Preview April 14, 2026 18:34 View deployment

fix(select): sanitize content

22dace3

vercel bot deployed to Preview April 14, 2026 21:23 View deployment

feat(select): add spans to rich content select text

f2695ca

vercel bot deployed to Preview April 15, 2026 13:56 View deployment

test(select): add rich content page

8a4e59b

vercel bot deployed to Preview April 15, 2026 20:14 View deployment

feat(select): strip out elements for plain options

deaafb9

vercel bot deployed to Preview April 15, 2026 23:20 View deployment

thetaPC commented Apr 15, 2026

View reviewed changes

thetaPC requested a review from ShaneK April 16, 2026 01:06

mfernando797-gif approved these changes Apr 19, 2026

View reviewed changes

ShaneK approved these changes Apr 20, 2026

View reviewed changes


		import { sanitizeDOMString } from './sanitization';

		interface RichContentOption {

Conversation

thetaPC commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thetaPC Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

thetaPC commented Apr 9, 2026 •

edited

Loading

vercel bot commented Apr 9, 2026 •

edited

Loading

thetaPC Apr 10, 2026 •

edited

Loading