Ionic multi-line ion-option

I’m trying to create an ion-select with ion-options that contain multiple lines but the framework seems to strip out any html elements added into the option. Any way around this?


try to use p tag into your test

did you find the solution?

No, not exactly. I had to settle for using a radio list and wound up with this:

<ion-list radio-group formControlName="selection">
      <ion-item *ngFor="let option of options">
        <ion-radio checked="true" [value]=""></ion-radio>

It’s because ionic modificates all html between ion-option. It removes all tags / selectors.


  <div class="title">One</div>
  <div class="sub">Two</div>

Output (compiled):



(of course leading and trailing white-spaces.

So, there is nothing to refer, no selector for css.

A solution could be: Create your own select-option component. Note, you can also display it as modal and popover.

In my opinion Ionic should not touch the value (tag-content) of option. Keep the html-tags!