Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Select

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

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

open()

Open the select interface.

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.

mode string

The mode determines which platform styles to use. Possible values are: "ios", "md", or "wp". For more information, see Platform Styles.

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

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

API

Native

General