Select

`ion-select`

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.

The select component takes child ion-option components. If ion-option is not given a value attribute then it will use its text as the value.

Interfaces

By default, the ion-select uses the AlertController API to open up the overlay of options in an alert. The interface can be changed to use the ActionSheetController API by passing action-sheet to the interface property. Read the other sections for the limitations of the action sheet interface.

Single Value: Radio Buttons

The standard ion-select component allows the user to select only one option. When selecting only one option the alert interface presents users with a radio button styled list of options. The action sheet interface can only be used with a single value select. If the number of options exceed 6, it will use the alert interface even if action-sheet is passed. 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" selected="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.

Note: the action sheet interface will not work with a multi-value select.

<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>

Select Buttons

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

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

The action sheet interface does not have an OK button, clicking on any of the options will automatically close the overlay and select that value.

Select Options

Since ion-select uses the Alert and Action Sheet interfaces, options can be passed to these components through the selectOptions property. This can be used to pass a custom title, subtitle, css class, and more. See the AlertController API docs and ActionSheetController API docs for the properties that each interface accepts.

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

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

Instance Members

`config`

`open()`

Open the select interface.

`options`

Input Properties

Attr	Type	Details
cancelText	`string`	The text to display on the cancel button. Default: `Cancel`.
disabled	`boolean`	If true, the user cannot interact with this element.
interface	`string`	The interface the select should use: `action-sheet` or `alert`. Default: `alert`.
multiple	`boolean`	If true, the element can accept multiple values.
okText	`string`	The text to display on the ok button. Default: `OK`.
placeholder	`string`	The text to display when the select is empty.
selectOptions	`any`	Any additional options that the `alert` or `action-sheet` interface can take. See the AlertController API docs and the ActionSheetController API docs for the create options for each interface.
selectedText	`string`	The text to display instead of the selected option's value.

Output Events

Attr	Details
ionCancel	Emitted when the selection was cancelled.
ionChange	Emitted when the selection has changed.

Sass Variables

iOS Material Design Windows Platform

Property	Default	Description
`$select-ios-padding-top`	`$item-ios-padding-top`	Padding top of the select
`$select-ios-padding-right`	`($item-ios-padding-right / 2)`	Padding right of the select
`$select-ios-padding-bottom`	`$item-ios-padding-bottom`	Padding bottom of the select
`$select-ios-padding-left`	`$item-ios-padding-left`	Padding left of the select
`$select-ios-icon-color`	`#999`	Color of the select icon
`$select-ios-placeholder-color`	`$select-ios-icon-color`	Color of the select placeholder

Property	Default	Description
`$select-md-padding-top`	`$item-md-padding-top`	Padding top of the select
`$select-md-padding-right`	`($item-md-padding-right / 2)`	Padding right of the select
`$select-md-padding-bottom`	`$item-md-padding-bottom`	Padding bottom of the select
`$select-md-padding-left`	`$item-md-padding-left`	Padding left of the select
`$select-md-icon-color`	`#999`	Color of the select icon
`$select-md-placeholder-color`	`$select-md-icon-color`	Color of the select placeholder

Property	Default	Description
`$select-wp-padding-vertical`	`0`	Padding top and bottom of the select
`$select-wp-padding-horizontal`	`($item-wp-padding-right / 2)`	Padding left and right of the select
`$select-wp-margin-top`	`$item-wp-padding-top`	Margin top of the select
`$select-wp-margin-right`	`($item-wp-padding-right / 2)`	Margin right of the select
`$select-wp-margin-bottom`	`$item-wp-padding-bottom`	Margin bottom of the select
`$select-wp-margin-left`	`($item-wp-padding-left / 2)`	Margin left of the select
`$select-wp-border-width`	`2px`	Border width of the select
`$select-wp-border-color`	`$input-wp-border-color`	Border color of the select
`$select-wp-icon-width`	`18px`	Width of the select icon
`$select-wp-icon-arrow-width`	`2px`	Width of the select icon arrow
`$select-wp-icon-color`	`$select-wp-border-color`	Color of the select icon
`$select-wp-placeholder-color`	`$select-wp-icon-color`	Color of the select placeholder