(Ionic 2) Grouping label inside select box

Question

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

-Appetizer:

---Salad

---etc

-Main Course:

---Steak

---etc

-Desert:

---Ice Cream

---etc

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>Bacon</ion-option>
                        <ion-option>Black Olives</ion-option>
                        <ion-option>Extra Cheese</ion-option>
                        <ion-option>Mushrooms</ion-option>
                        <ion-option>Pepperoni</ion-option>
                        <ion-option>Sausage</ion-option>
 </ion-select>

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

Answer 1

A good way to do this is to add the disabled tag to the "label".

This will cause the option to not be selectable, you can then add a class to it in order to adjust the look as needed.

<ion-select [(ngModel)]="food" multiple="true">
    <ion-option disabled>Toppings</ion-option>
    <ion-option>Bacon</ion-option>
    <ion-option>Black Olives</ion-option>
    <ion-option>Extra Cheese</ion-option>
    <ion-option>Mushrooms</ion-option>
    <ion-option>Pepperoni</ion-option>
    <ion-option>Sausage</ion-option>
 </ion-select>

Answer 2

I use it in IONIC 5/6

In .html File

    <ion-select multiple class="group-select">
      <ion-select-option disabled class="option-group-custom"> -- EU Group 1 -- </ion-select-option>
      <ion-select-option>Add Knowledge</ion-select-option>
      <ion-select-option>Share Knowledge</ion-select-option>
      <ion-select-option>Other</ion-select-option>
      <ion-select-option disabled class="option-group-custom"> -- EU Group 2 -- </ion-select-option>
      <ion-select-option>Option 1</ion-select-option>
      <ion-select-option>Option 2</ion-select-option>
    </ion-select>

and in global.scss

.option-group-custom {
  .alert-checkbox-icon {
    display: none;
  }

  .alert-checkbox-label {
    padding-left: 10px;
  }
}