Select component in Ionic 2

I really like the new select component now built into Ionic 2.  This creates a really nice alert style selection prompt which looks pretty similar in iOS and Android and is incredibly easy to use.

In your HTML just use the <ion-select> tag like this:

<ion-select [(ngModel)]=””>
<ion-option checked=”true” value = “Ash”>Ash</ion-option>
<ion-option value = “Bay”>Bay</ion-option>
<ion-option value = “Beech”>Beech</ion-option>
<ion-option value = “Cedar”>Cedar</ion-option>
<ion-option value = “Redwood”>Redwood</ion-option>

This creates a selection dialog with 5 options that are bound to the model inside the component.  When the user clicks the select field on screen they see this:


The select component can easily be configured for multi-value entries as well as single values.  For more information, see the Ionic 2 documentation here.  I’m looking forward to an up and coming release of the Ionic Framework when date inputs will get the same treatment (i.e they will have a dialog just like the select component).  According to the roadmap this is currently scheduled for beta.5.


I’m a mobile applications developer based in the UK, concentrating primarily on hybrid application development with Ionic and Ionic 2 but also with native development skills. Please visit for more information about me and how I may be able to help you with mobile application development, particularly with Ionic 2 but also with other mobile frameworks and technologies.  Thanks for visiting.

3 thoughts on “Select component in Ionic 2

  1. AK

    Hi , I am trying to use ionic 2 ion-select component as well . The ‘ok’ and ‘cancel’ button in the alert have same css classes. I need to style both the buttons differently. Do you know any way to override inidividual styles for ‘OK’ and ‘cancel’ button ?

  2. nithya

    hi, sir/mam
    I am trying to use ionic 2 ion-select component as well.
    How to write angular function plz, give me some guidens.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s