Grouping inside select box?

I need to create the multiple checkbox select box that have grouping label inside the box.


-Main Course:

.Ice Cream

This is my code:

<ion-select [(ngModel)]="food" multiple="true">
                        <ion-label>Toppings</ion-label> <!-- I want to create group label in here -->
                        <ion-option>Black Olives</ion-option>
                        <ion-option>Extra Cheese</ion-option>

How to create the grouping label inside the ion-select? Thanks…

1 Like

Currently this isn’t supported with ion-select/ion-option. Though I like this idea, as it could be built around the same idea as optgroup

  <optgroup label="Group 1">
    <option>Option 1.1</option>
  <optgroup label="Group 2">
    <option>Option 2.1</option>

@mhartington hi, I tried to use ‘optgroup’ but it didn’t work. Is there any solution in ionic for this situation?


Yeah this would be awesome

1 Like

I cannot believe, than one cannot create groups. I find cool the design of ion-select. If one programms a normal Select (for groups) and ion-select for others, would it be not strange/weird? Is there a way to introduce some special class to a ion-option and then using CSS remove/change the ion-option properties (for example: to hide the radio button, to change the size of the option) in order to customize the ion-select?

1 Like

Hello, yes this functionality would very useful

Useful workaround: Use disabled with IonSelectOption as described here: html - (Ionic 2) Grouping label inside select box - Stack Overflow

1 Like