Select

Improve this doc

The ion-select component is similar to an HTML <select> element, however, Ionic's select component makes it easier for users to sort through and select the preferred option or options. When users tap the select component, a dialog will appear with all of the options in a large, easy to select list for users.

Under-the-hood the ion-select actually uses the Alert API to open up the overlay of options which the user is presented with. Select can take numerous child ion-option components. If ion-option is not given a value attribute then it will use its text as the value.

Single Value: Radio Buttons

The standard ion-select component allows the user to select only one option. When selecting only one option the alert overlay presents users with a radio button styled list of options. The ion-select component's value receives the value of the selected option's value.

<ion-item>
  <ion-label>Gender</ion-label>
  <ion-select [(ngModel)]="gender">
    <ion-option value="f" checked="true">Female</ion-option>
    <ion-option value="m">Male</ion-option>
  </ion-select>
</ion-item>

Multiple Value: Checkboxes

By adding the multiple="true" attribute to ion-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 ion-select multiple="true" component's value receives an array of all the selected option values. In the example below, because each option is not given a value, then it'll use its text as the value instead.

<ion-item>
  <ion-label>Toppings</ion-label>
  <ion-select [(ngModel)]="toppings" multiple="true">
    <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>
</ion-item>

Alert Buttons

By default, the two buttons read Cancel and OK. The each button's text can be customized using the cancelText and okText attributes:

<ion-select okText="Okay" cancelText="Dismiss">
  ...
</ion-select>

Alert Options

Remember how ion-select is really just a wrapper to Alert? By using the alertOptions property you can pass custom options to the alert overlay. This would be useful if there is a custom alert title, subtitle or message. Alert API

<ion-select [alertOptions]="alertOptions">
  ...
</ion-select>

this.alertOptions = {
  title: 'Pizza Toppings',
  subTitle: 'Select your toppings'
};

Component

selector: ion-select

Input Properties

Output Events