<ion-select> multiple=“true” is not displaying the options in a checklist in ionic 5 angular 8

Ionic Framework
1

ion-select multiple=“true” is not displaying the options in a checklist in ionic 5 angular 8, it’s just displaying them in a list without checkboxes, what’s the reason?

<ion-item>
      <ion-select required placeholder="اختر الصنف" multiple="true" okText="تم" cancelText="الغاء">
        <ion-select-option value="1" >الوصفات السهلة</ion-select-option>
        <ion-select-option value="2">الوصفات السريعة</ion-select-option>
        <ion-select-option value="3">الوصفات النباتية</ion-select-option>
      </ion-select>  
 </ion-item>

strong text

2

I believe that they are different things. Check the ion-select documentation and the ion-checkbox documentation. To accomplish what you want it is possible to include the checkboxes within an <ion-list> tag:

Copied from documentaion:

<!-- Checkboxes in a List -->
<ion-list>
  <ion-item *ngFor="let entry of form">
    <ion-label>{{entry.val}}</ion-label>
    <ion-checkbox slot="end" [(ngModel)]="entry.isChecked"></ion-checkbox>
  </ion-item>
</ion-list>

in .ts page

public form = [
      { val: 'Pepperoni', isChecked: true },
      { val: 'Sausage', isChecked: false },
      { val: 'Mushroom', isChecked: false }
    ];
3

@leonardofmed But the documentation says:

[Multiple Selection] (https://ionicframework.com/docs/api/select#multiple-selection)

By adding the multiple attribute to select, users are able to select multiple options. When multiple options can be selected, the alert overlay presents users with a checkbox styled list of options. The select component’s value receives an array of all of the selected option values.image

4

Something is unusual in your environment, because I copied the text in your OP exactly into a scratch project and it presented as checkboxes.

6

@rapropos

image
image848×298 5.93 KB