diff --git a/packages/core/package.json b/packages/core/package.json
index 1d01b33e64..7ed57a9a18 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -10,11 +10,11 @@
     "README.md"
   ],
   "dependencies": {
-    "@stencil/core": "^0.0.4-11"
+    "@stencil/core": "0.0.4-14"
   },
   "devDependencies": {
-    "@stencil/dev-server": "^0.0.14",
-    "@stencil/utils": "^0.0.4"
+    "@stencil/dev-server": "latest",
+    "@stencil/utils": "latest"
   },
   "scripts": {
     "build": "stencil build",
diff --git a/packages/core/src/components/select/option.tsx b/packages/core/src/components/select/option.tsx
new file mode 100644
index 0000000000..19e2e544fc
--- /dev/null
+++ b/packages/core/src/components/select/option.tsx
@@ -0,0 +1,16 @@
+import { Component } from '@stencil/core';
+
+
+@Component({
+  tag: 'ion-option',
+  host: {
+    theme: 'option'
+  }
+})
+export class option {
+
+  render() {
+    return <div class="my-option"></div>;
+  }
+
+}
\ No newline at end of file
diff --git a/packages/core/src/components/select/select.ios.scss b/packages/core/src/components/select/select.ios.scss
new file mode 100644
index 0000000000..be13730339
--- /dev/null
+++ b/packages/core/src/components/select/select.ios.scss
@@ -0,0 +1,56 @@
+@import "../../themes/ionic.globals.ios";
+@import "./select";
+
+// iOS Select
+// --------------------------------------------------
+
+/// @prop - Padding top of the select
+$select-ios-padding-top:         $item-ios-padding-top !default;
+
+/// @prop - Padding end of the select
+$select-ios-padding-end:         ($item-ios-padding-end / 2) !default;
+
+/// @prop - Padding bottom of the select
+$select-ios-padding-bottom:      $item-ios-padding-bottom !default;
+
+/// @prop - Padding start of the select
+$select-ios-padding-start:       $item-ios-padding-start !default;
+
+/// @prop - Color of the select icon
+$select-ios-icon-color:          #999 !default;
+
+/// @prop - Color of the select placeholder
+$select-ios-placeholder-color:   $select-ios-icon-color !default;
+
+
+.select-ios {
+  @include padding($select-ios-padding-top, $select-ios-padding-end, $select-ios-padding-bottom, $select-ios-padding-start);
+}
+
+.select-ios .select-placeholder {
+  color: $select-ios-placeholder-color;
+}
+
+.select-ios .select-icon {
+  position: relative;
+
+  width: 12px;
+  height: 18px;
+}
+
+.select-ios .select-icon .select-icon-inner {
+  @include position(50%, null, null, 5px);
+  @include margin(-2px, null, null, null);
+
+  position: absolute;
+
+  width: 0;
+  height: 0;
+
+  border-top: 5px solid;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  color: $select-ios-icon-color;
+
+  pointer-events: none;
+}
diff --git a/packages/core/src/components/select/select.md.scss b/packages/core/src/components/select/select.md.scss
new file mode 100644
index 0000000000..ea2f6f2468
--- /dev/null
+++ b/packages/core/src/components/select/select.md.scss
@@ -0,0 +1,60 @@
+@import "../../themes/ionic.globals.md";
+@import "./select";
+
+// Material Design Select
+// --------------------------------------------------
+
+/// @prop - Padding top of the select
+$select-md-padding-top:         $item-md-padding-top !default;
+
+/// @prop - Padding end of the select
+$select-md-padding-end:         ($item-md-padding-end / 2) !default;
+
+/// @prop - Padding bottom of the select
+$select-md-padding-bottom:      $item-md-padding-bottom !default;
+
+/// @prop - Padding start of the select
+$select-md-padding-start:       $item-md-padding-start !default;
+
+/// @prop - Color of the select icon
+$select-md-icon-color:          #999 !default;
+
+/// @prop - Color of the select placeholder
+$select-md-placeholder-color:   $select-md-icon-color !default;
+
+
+.select-md {
+  @include padding($select-md-padding-top, $select-md-padding-end, $select-md-padding-bottom, $select-md-padding-start);
+}
+
+.select-md .select-placeholder {
+  color: $select-md-placeholder-color;
+}
+
+.select-md .item-select ion-label {
+  @include margin-horizontal(0, null);
+}
+
+.select-md .select-icon {
+  position: relative;
+
+  width: 12px;
+  height: 19px;
+}
+
+.select-md .select-icon .select-icon-inner {
+  @include position(50%, null, null, 5px);
+  @include margin(-3px, null, null, null);
+
+  position: absolute;
+
+  width: 0;
+  height: 0;
+
+  border-top: 5px solid;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  color: $select-md-icon-color;
+
+  pointer-events: none;
+}
diff --git a/packages/core/src/components/select/select.scss b/packages/core/src/components/select/select.scss
new file mode 100644
index 0000000000..dcd429f952
--- /dev/null
+++ b/packages/core/src/components/select/select.scss
@@ -0,0 +1,56 @@
+@import "../../themes/ionic.globals";
+
+// Select
+// --------------------------------------------------
+
+/// @prop - Margin top of the select popover list
+$select-popover-list-margin-top:         -1px !default;
+
+/// @prop - Margin end of the select popover list
+$select-popover-list-margin-end:         0 !default;
+
+/// @prop - Margin bottom of the select popover list
+$select-popover-list-margin-bottom:      -1px !default;
+
+/// @prop - Margin start of the select popover list
+$select-popover-list-margin-start:       0 !default;
+
+
+ion-select {
+  display: flex;
+  overflow: hidden;
+
+  max-width: 45%;
+}
+
+.select-text {
+  overflow: hidden;
+
+  flex: 1;
+
+  min-width: 16px;
+
+  font-size: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.item-multiple-inputs ion-select {
+  position: relative;
+}
+
+.select-disabled,
+.item-select-disabled ion-label {
+  opacity: .4;
+
+  pointer-events: none;
+}
+
+.select-popover ion-list {
+  @include margin($select-popover-list-margin-top, $select-popover-list-margin-end, $select-popover-list-margin-bottom, $select-popover-list-margin-start);
+}
+
+// TODO remove
+.select .option {
+  display: none;
+}
\ No newline at end of file
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
new file mode 100644
index 0000000000..ab4760bd46
--- /dev/null
+++ b/packages/core/src/components/select/select.tsx
@@ -0,0 +1,365 @@
+import { Component, CssClassMap, Event, EventEmitter, Prop } from '@stencil/core';
+
+
+@Component({
+  tag: 'ion-select',
+  styleUrls: {
+    ios: 'select.ios.scss',
+    md: 'select.md.scss',
+    wp: 'select.wp.scss'
+  },
+  host: {
+    theme: 'select'
+  }
+})
+export class Select {
+  text: any;
+  id: any;
+  labelId: any;
+
+  /**
+   * @input {boolean} If true, the user cannot interact with this element. Defaults to `false`.
+   */
+  @Prop() disabled: boolean = false;
+
+  /**
+   * @input {string} The text to display on the cancel button. Default: `Cancel`.
+   */
+  @Prop() cancelText: string = 'Cancel';
+
+  /**
+   * @input {string} The text to display on the ok button. Default: `OK`.
+   */
+  @Prop() okText: string = 'OK';
+
+  /**
+   * @input {string} The text to display when the select is empty.
+   */
+  @Prop() placeholder: string;
+
+  /**
+   * @input {any} Any additional options that the `alert` or `action-sheet` interface can take.
+   * See the [AlertController API docs](../../alert/AlertController/#create) and the
+   * [ActionSheetController API docs](../../action-sheet/ActionSheetController/#create) for the
+   * create options for each interface.
+   */
+  @Prop() selectOptions: any = {};
+
+  /**
+   * @input {string} The interface the select should use: `action-sheet`, `popover` or `alert`. Default: `alert`.
+   */
+  @Prop() interface: string = '';
+
+  /**
+   * @input {string} The text to display instead of the selected option's value.
+   */
+  @Prop() selectedText: string;
+
+  /**
+   * @input {boolean} If true, the element can accept multiple values.
+   */
+  @Prop() multiple: boolean;
+
+  /**
+   * @output {EventEmitter} Emitted when the selection is cancelled.
+   */
+  @Event() ionCancel: EventEmitter;
+
+
+  hostData() {
+    return {
+      class: {
+        'select-disabled': this.disabled
+      }
+    };
+  }
+
+  render() {
+    let addPlaceholderClass = false
+
+    let selectText = this.selectedText || this.text;
+    if (!selectText && this.placeholder) {
+      selectText = this.placeholder;
+      addPlaceholderClass = true;
+    }
+
+    const selectTextClasses: CssClassMap = {
+      'select-text': true,
+      'select-placeholder': addPlaceholderClass
+    };
+
+    return [
+      // add placeholder class
+      <div class={selectTextClasses}>{ selectText }</div>,
+      <div class="select-icon">
+        <div class="select-icon-inner"></div>
+      </div>,
+      <button
+        aria-haspopup="true"
+        id={this.id}
+        aria-labelledby={this.labelId}
+        aria-disabled={this.disabled ? "true" : false}
+        class="item-cover">
+      </button>
+    ];
+  }
+
+}
+
+// export class Select extends BaseInput<any> implements OnDestroy {
+
+//   _options: QueryList<Option>;
+//   _overlay: ActionSheet | Alert | Popover;
+//   _texts: string[] = [];
+//   _text: string = '';
+
+
+//   @HostListener('click', ['$event'])
+//   _click(ev: UIEvent) {
+//     if (ev.detail === 0) {
+//       // do not continue if the click event came from a form submit
+//       return;
+//     }
+//     ev.preventDefault();
+//     ev.stopPropagation();
+//     this.open(ev);
+//   }
+
+//   @HostListener('keyup.space')
+//   _keyup() {
+//     this.open();
+//   }
+
+//   /**
+//    * @hidden
+//    */
+//   getValues(): any[] {
+//     const values = Array.isArray(this._value) ? this._value : [this._value];
+//     assert(this._multi || values.length <= 1, 'single only can have one value');
+//     return values;
+//   }
+
+//   /**
+//    * Open the select interface.
+//    */
+//   open(ev?: UIEvent) {
+//     if (this.isFocus() || this._disabled) {
+//       return;
+//     }
+
+//     console.debug('select, open alert');
+
+//     // the user may have assigned some options specifically for the alert
+//     const selectOptions = deepCopy(this.selectOptions);
+
+//     // make sure their buttons array is removed from the options
+//     // and we create a new array for the alert's two buttons
+//     selectOptions.buttons = [{
+//       text: this.cancelText,
+//       role: 'cancel',
+//       handler: () => {
+//         this.ionCancel.emit(this);
+//       }
+//     }];
+
+//     // if the selectOptions didn't provide a title then use the label's text
+//     if (!selectOptions.title && this._item) {
+//       selectOptions.title = this._item.getLabelText();
+//     }
+
+//     let options = this._options.toArray();
+//     if (this.interface === 'action-sheet' && options.length > 6) {
+//       console.warn('Interface cannot be "action-sheet" with more than 6 options. Using the "alert" interface.');
+//       this.interface = 'alert';
+//     }
+
+//     if ((this.interface === 'action-sheet' || this.interface === 'popover') && this._multi) {
+//       console.warn('Interface cannot be "' + this.interface + '" with a multi-value select. Using the "alert" interface.');
+//       this.interface = 'alert';
+//     }
+
+//     if (this.interface === 'popover' && !ev) {
+//       console.warn('Interface cannot be "popover" without UIEvent.');
+//       this.interface = 'alert';
+//     }
+
+//     let overlay: ActionSheet | Alert | Popover;
+
+//     if (this.interface === 'action-sheet') {
+//       selectOptions.buttons = selectOptions.buttons.concat(options.map(input => {
+//         return {
+//           role: (input.selected ? 'selected' : ''),
+//           text: input.text,
+//           handler: () => {
+//             this.value = input.value;
+//             input.ionSelect.emit(input.value);
+//           }
+//         };
+//       }));
+//       var selectCssClass = 'select-action-sheet';
+
+//       // If the user passed a cssClass for the select, add it
+//       selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : '';
+
+//       selectOptions.cssClass = selectCssClass;
+//       overlay = new ActionSheet(this._app, selectOptions, this.config);
+
+//     } else if (this.interface === 'popover') {
+//       let popoverOptions: SelectPopoverOption[] = options.map(input => ({
+//         text: input.text,
+//         checked: input.selected,
+//         disabled: input.disabled,
+//         value: input.value,
+//         handler: () => {
+//           this.value = input.value;
+//           input.ionSelect.emit(input.value);
+//         }
+//       }));
+
+//       var popoverCssClass = 'select-popover';
+
+//       // If the user passed a cssClass for the select, add it
+//       popoverCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : '';
+
+//       overlay = new Popover(this._app, SelectPopover, {
+//         options: popoverOptions
+//       }, {
+//         cssClass: popoverCssClass
+//       }, this.config, this.deepLinker);
+
+//       // ev.target is readonly.
+//       // place popover regarding to ion-select instead of .button-inner
+//       Object.defineProperty(ev, 'target', { value: ev.currentTarget });
+//       selectOptions.ev = ev;
+
+//     } else {
+//       // default to use the alert interface
+//       this.interface = 'alert';
+
+//       // user cannot provide inputs from selectOptions
+//       // alert inputs must be created by ionic from ion-options
+//       selectOptions.inputs = this._options.map(input => {
+//         return {
+//           type: (this._multi ? 'checkbox' : 'radio'),
+//           label: input.text,
+//           value: input.value,
+//           checked: input.selected,
+//           disabled: input.disabled,
+//           handler: (selectedOption: any) => {
+//             // Only emit the select event if it is being checked
+//             // For multi selects this won't emit when unchecking
+//             if (selectedOption.checked) {
+//               input.ionSelect.emit(input.value);
+//             }
+//           }
+//         };
+//       });
+
+//       var selectCssClass = 'select-alert';
+
+//       // create the alert instance from our built up selectOptions
+//       overlay = new Alert(this._app, selectOptions, this.config);
+
+//       if (this._multi) {
+//         // use checkboxes
+//         selectCssClass += ' multiple-select-alert';
+//       } else {
+//         // use radio buttons
+//         selectCssClass += ' single-select-alert';
+//       }
+
+//       // If the user passed a cssClass for the select, add it
+//       selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : '';
+//       overlay.setCssClass(selectCssClass);
+
+//       overlay.addButton({
+//         text: this.okText,
+//         handler: (selectedValues) => this.value = selectedValues
+//       });
+
+//     }
+
+//     overlay.present(selectOptions);
+
+//     this._fireFocus();
+
+//     overlay.onDidDismiss(() => {
+//       this._fireBlur();
+//       this._overlay = undefined;
+//     });
+
+//     this._overlay = overlay;
+//   }
+
+//   /**
+//    * Close the select interface.
+//    */
+//   close(): Promise<any> {
+//     if (!this._overlay || !this.isFocus()) {
+//       return;
+//     }
+
+//     return this._overlay.dismiss();
+//   }
+
+
+//   /**
+//    * @hidden
+//    */
+//   get text() {
+//     return (this._multi ? this._texts : this._texts.join());
+//   }
+
+
+//   /**
+//    * @private
+//    */
+//   @ContentChildren(Option)
+//   set options(val: QueryList<Option>) {
+//     this._options = val;
+//     const values = this.getValues();
+//     if (values.length === 0) {
+//       // there are no values set at this point
+//       // so check to see who should be selected
+//       // we use writeValue() because we don't want to update ngModel
+//       this.writeValue(val.filter(o => o.selected).map(o => o.value));
+//     } else {
+//       this._inputUpdated();
+//     }
+//   }
+
+//   _inputShouldChange(val: string[]|string): boolean {
+//     return !deepEqual(this._value, val);
+//   }
+
+//   /**
+//    * TODO: REMOVE THIS
+//    * @hidden
+//    */
+//   _inputChangeEvent(): any {
+//     return this.value;
+//   }
+
+//   /**
+//    * @hidden
+//    */
+//   _inputUpdated() {
+//     this._texts.length = 0;
+
+//     if (this._options) {
+//       this._options.forEach(option => {
+//         // check this option if the option's value is in the values array
+//         option.selected = this.getValues().some(selectValue => {
+//           return isCheckedProperty(selectValue, option.value);
+//         });
+
+//         if (option.selected) {
+//           this._texts.push(option.text);
+//         }
+//       });
+//     }
+
+//     this._text = this._texts.join(', ');
+//   }
+
+// }
diff --git a/packages/core/src/components/select/select.wp.scss b/packages/core/src/components/select/select.wp.scss
new file mode 100644
index 0000000000..85f7336ee6
--- /dev/null
+++ b/packages/core/src/components/select/select.wp.scss
@@ -0,0 +1,93 @@
+@import "../../themes/ionic.globals.wp";
+@import "./select";
+
+// Windows Select
+// --------------------------------------------------
+
+/// @prop - Padding top and bottom of the select
+$select-wp-padding-vertical:    0 !default;
+
+/// @prop - Padding start/end of the select
+$select-wp-padding-horizontal:  ($item-wp-padding-end / 2) !default;
+
+/// @prop - Margin top of the select
+$select-wp-margin-top:          $item-wp-padding-top !default;
+
+/// @prop - Margin end of the select
+$select-wp-margin-end:          ($item-wp-padding-end / 2) !default;
+
+/// @prop - Margin bottom of the select
+$select-wp-margin-bottom:       $item-wp-padding-bottom !default;
+
+/// @prop - Margin start of the select
+$select-wp-margin-start:        ($item-wp-padding-start / 2) !default;
+
+/// @prop - Border width of the select
+$select-wp-border-width:        2px !default;
+
+/// @prop - Border color of the select
+$select-wp-border-color:        $input-wp-border-color !default;
+
+/// @prop - Width of the select icon
+$select-wp-icon-width:          18px !default;
+
+/// @prop - Width of the select icon arrow
+$select-wp-icon-arrow-width:    2px !default;
+
+/// @prop - Color of the select icon
+$select-wp-icon-color:          $select-wp-border-color !default;
+
+/// @prop - Color of the select placeholder
+$select-wp-placeholder-color:   $select-wp-icon-color !default;
+
+
+.select-wp {
+  @include margin($select-wp-margin-top, $select-wp-margin-end, $select-wp-margin-bottom, $select-wp-margin-start);
+  @include padding($select-wp-padding-vertical, $select-wp-padding-horizontal);
+
+  flex: 1;
+
+  max-width: 100%;
+
+  border: $select-wp-border-width solid $select-wp-border-color;
+  line-height: 3rem;
+}
+
+.select-wp .select-placeholder {
+  color: $select-wp-placeholder-color;
+}
+
+.item-wp.item-select ion-label {
+  @include margin-horizontal(0, null);
+}
+
+.select-wp .select-icon {
+  position: relative;
+
+  align-self: center;
+
+  width: $select-wp-icon-width;
+  height: $select-wp-icon-width;
+}
+
+.select-wp .select-icon .select-icon-inner {
+  @include position(3px, null, null, 5px);
+
+  position: absolute;
+
+  display: block;
+
+  width: ($select-wp-icon-width / 2);
+  height: ($select-wp-icon-width / 2);
+
+  border-top: $select-wp-icon-arrow-width solid $select-wp-icon-color;
+  border-right: $select-wp-icon-arrow-width solid $select-wp-icon-color;
+
+  transform: rotate(135deg);
+
+  pointer-events: none;
+}
+
+.select-wp .select-text {
+  min-height: 3rem;
+}
diff --git a/packages/core/src/components/select/test/basic.html b/packages/core/src/components/select/test/basic.html
new file mode 100644
index 0000000000..e8661304ea
--- /dev/null
+++ b/packages/core/src/components/select/test/basic.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Ionic Select</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Select</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="outer-content test-content">
+      <ion-list>
+        <ion-list-header>Single Value Select</ion-list-header>
+
+        <ion-item>
+          <ion-label>Gender</ion-label>
+          <ion-select name="gender" placeholder="Select One">
+            <ion-option value="f">Female</ion-option>
+            <ion-option value="m">Male</ion-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Hair Color</ion-label>
+          <ion-select name="hairColor" ok-text="Okay" cancel-text="Dismiss">
+            <ion-option value="brown">Brown</ion-option>
+            <ion-option value="blonde">Blonde</ion-option>
+            <ion-option value="black">Black</ion-option>
+            <ion-option value="red">Red</ion-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Gaming</ion-label>
+          <ion-select name="gaming" ok-text="Okay" cancel-text="Dismiss">
+            <ion-option value="nes">NES</ion-option>
+            <ion-option value="n64">Nintendo64</ion-option>
+            <ion-option value="ps">PlayStation</ion-option>
+            <ion-option value="genesis">Sega Genesis</ion-option>
+            <ion-option value="saturn">Sega Saturn</ion-option>
+            <ion-option value="snes">SNES</ion-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Date</ion-label>
+          <ion-select (ionChange)="monthChange($event)" placeholder="Month">
+            <ion-option value="01">January</ion-option>
+            <ion-option value="02">February</ion-option>
+            <ion-option value="03" selected="true">March</ion-option>
+            <ion-option value="04">April</ion-option>
+            <ion-option value="05">May</ion-option>
+            <ion-option value="06">June</ion-option>
+            <ion-option value="07">July</ion-option>
+            <ion-option value="08">August</ion-option>
+            <ion-option value="09">September</ion-option>
+            <ion-option value="10">October</ion-option>
+            <ion-option value="11">November</ion-option>
+            <ion-option value="12">December</ion-option>
+          </ion-select>
+          <ion-select (ionChange)="yearChange($event)" placeholder="Year">
+            <ion-option>1989</ion-option>
+            <ion-option>1990</ion-option>
+            <ion-option>1991</ion-option>
+            <ion-option>1992</ion-option>
+            <ion-option>1993</ion-option>
+            <ion-option selected="true">1994</ion-option>
+            <ion-option>1995</ion-option>
+            <ion-option>1996</ion-option>
+            <ion-option>1997</ion-option>
+            <ion-option>1998</ion-option>
+            <ion-option>1999</ion-option>
+          </ion-select>
+        </ion-item>
+
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>Popover Interface Select</ion-list-header>
+
+        <ion-item>
+          <ion-label>Gender</ion-label>
+          <ion-select name="gender" interface="popover">
+            <ion-option value="f">Female</ion-option>
+            <ion-option value="m">Male</ion-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Gaming</ion-label>
+          <ion-select name="gaming" ok-text="Okay" cancel-text="Dismiss" selected-text="Nintendo 64" interface="popover">
+            <ion-option value="nes">NES</ion-option>
+            <ion-option value="n64">Nintendo64</ion-option>
+            <ion-option value="ps">PlayStation</ion-option>
+            <ion-option value="genesis">Sega Genesis</ion-option>
+            <ion-option value="saturn">Sega Saturn</ion-option>
+            <ion-option value="snes">SNES</ion-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Date</ion-label>
+          <ion-select (ionChange)="monthChange($event)" placeholder="Month" interface="popover">
+            <ion-option value="01">January</ion-option>
+            <ion-option value="02">February</ion-option>
+            <ion-option value="03" selected="true">March</ion-option>
+            <ion-option value="04">April</ion-option>
+            <ion-option value="05">May</ion-option>
+            <ion-option value="06">June</ion-option>
+            <ion-option value="07">July</ion-option>
+            <ion-option value="08">August</ion-option>
+            <ion-option value="09">September</ion-option>
+            <ion-option value="10">October</ion-option>
+            <ion-option value="11">November</ion-option>
+            <ion-option value="12">December</ion-option>
+          </ion-select>
+          <ion-select (ionChange)="yearChange($event)" placeholder="Year" interface="popover">
+            <ion-option>1989</ion-option>
+            <ion-option>1990</ion-option>
+            <ion-option>1991</ion-option>
+            <ion-option>1992</ion-option>
+            <ion-option>1993</ion-option>
+            <ion-option selected="true">1994</ion-option>
+            <ion-option>1995</ion-option>
+            <ion-option>1996</ion-option>
+            <ion-option>1997</ion-option>
+            <ion-option>1998</ion-option>
+            <ion-option>1999</ion-option>
+          </ion-select>
+        </ion-item>
+
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>Multiple Value Select</ion-list-header>
+
+        <ion-item>
+          <ion-label>Toppings</ion-label>
+          <ion-select name="toppings" multiple="true" cancel-text="Nah" ok-text="Okay!">
+            <ion-option value="bacon">Bacon</ion-option>
+            <ion-option value="olives">Black Olives</ion-option>
+            <ion-option value="xcheese">Extra Cheese</ion-option>
+            <ion-option value="peppers">Green Peppers</ion-option>
+            <ion-option value="mushrooms">Mushrooms</ion-option>
+            <ion-option value="onions">Onions</ion-option>
+            <ion-option value="pepperoni">Pepperoni</ion-option>
+            <ion-option value="pineapple">Pineapple</ion-option>
+            <ion-option value="sausage">Sausage</ion-option>
+            <ion-option value="Spinach">Spinach</ion-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Pets</ion-label>
+          <ion-select name="pets" multiple="true">
+            <ion-option value="bird">Bird</ion-option>
+            <ion-option value="cat">Cat</ion-option>
+            <ion-option value="dog">Dog</ion-option>
+            <ion-option value="honeybadger">Honey Badger</ion-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Skittles</ion-label>
+          <ion-select name="skittles" multiple="true" ok-text="Okay" cancel-text="Dismiss">
+            <ion-option value="red">Red</ion-option>
+            <ion-option value="purple">Purple</ion-option>
+            <ion-option value="yellow">Yellow</ion-option>
+            <ion-option value="orange">Orange</ion-option>
+            <ion-option value="green">Green</ion-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Disabled</ion-label>
+          <ion-select multiple disabled="true">
+            <ion-option checked="true">Selected Text</ion-option>
+          </ion-select>
+        </ion-item>
+
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>Action Sheet Interface Select</ion-list-header>
+
+        <ion-item>
+          <ion-label>Mute Notifications</ion-label>
+          <ion-select name="notifications" interface="action-sheet">
+            <ion-option value="mute_15">For 15 Minutes</ion-option>
+            <ion-option value="mute_1">For 1 Hour</ion-option>
+            <ion-option value="mute_23">For 24 Hours</ion-option>
+            <ion-option value="mute_inf">Until I turn it back on</ion-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Rating</ion-label>
+          <ion-select name="rating" interface="action-sheet">
+            <ion-option value="1">1 Star</ion-option>
+            <ion-option value="2">2 Stars</ion-option>
+            <ion-option value="3">3 Stars</ion-option>
+            <ion-option value="4">4 Stars</ion-option>
+            <ion-option value="5">5 Stars</ion-option>
+          </ion-select>
+        </ion-item>
+
+      </ion-list>
+
+      <div text-center>
+        <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
+          Toggle Disabled
+        </ion-button>
+      </div>
+
+    </ion-content>
+
+    <script>
+      function toggleBoolean(id, prop) {
+        var ele = document.getElementById(id);
+
+        var isTrue = ele[prop] ? false : true;
+        ele[prop] = isTrue;
+        console.log('in toggleBoolean, setting', prop, 'to', isTrue);
+      }
+    </script>
+  </ion-app>
+</body>
+</html>
+
+
+