Skip to content

feat(select): allow HTML within options#31072

Draft
thetaPC wants to merge 7 commits intonextfrom
FW-7137
Draft

feat(select): allow HTML within options#31072
thetaPC wants to merge 7 commits intonextfrom
FW-7137

Conversation

@thetaPC
Copy link
Copy Markdown
Contributor

@thetaPC thetaPC commented Apr 9, 2026

Issue number: resolves #


What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

  • Yes
  • No

Other information

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

vercel bot commented Apr 9, 2026

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

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment Apr 10, 2026 4:19am

Request Review

// --------------------------------------------------

.action-sheet-button-label {
gap: 12px;
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I decided to use the same value that ionic uses.

<div class="alert-button-inner">
<div class="alert-checkbox-icon">
<div class="alert-checkbox-inner"></div>
{inputs.map((i) => {
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only change is the addition of optionLabelOptions and renderOptionLabel

<div class="alert-button-inner">
<div class="alert-radio-icon">
<div class="alert-radio-inner"></div>
{inputs.map((i) => {
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only change is the addition of optionLabelOptions and renderOptionLabel

*/
this.closeModal();
}
{this.options.map((option, index) => {
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only change is the addition of optionLabelOptions and renderOptionLabel

onIonChange={(ev) => {
this.setChecked(ev);
this.callOptionHandler(ev);
return this.options.map((option, index) => {
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only change is the addition of optionLabelOptions and renderOptionLabel

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment on lines +46 to +48
<slot name="start"></slot>
<slot></slot>
<slot name="end"></slot>
Copy link
Copy Markdown
Contributor Author

@thetaPC thetaPC Apr 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

onIonChange={(ev) => {
this.setChecked(ev);
this.callOptionHandler(ev);
return options.map((option, index) => {
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only change is the addition of optionLabelOptions and renderOptionLabel

*/
this.dismissParentPopover();
}
{options.map((option, index) => {
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only change is the addition of optionLabelOptions and renderOptionLabel

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: angular @ionic/angular package package: core @ionic/core package package: vue @ionic/vue package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant