From b3a7298a522498b4fc3d4b27addb6aaa37a00944 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Wed, 20 Jan 2016 21:41:54 -0600
Subject: [PATCH] refactor(input): place inputs inside of ion-item

---
 ionic/animations/scroll-to.ts                 |  30 +-
 ionic/components.ts                           |   4 +-
 ionic/components/card/card.ios.scss           |   2 +-
 ionic/components/card/card.md.scss            |   2 +-
 ionic/components/checkbox/checkbox.ios.scss   |  96 +--
 ionic/components/checkbox/checkbox.md.scss    | 100 ++-
 ionic/components/checkbox/checkbox.ts         | 108 ++--
 ionic/components/checkbox/test/basic/e2e.ts   |   2 +-
 .../components/checkbox/test/basic/main.html  |  42 +-
 ionic/components/input/input.ios.scss         |  11 +-
 ionic/components/input/input.md.scss          |  15 +-
 ionic/components/input/input.scss             |  90 ++-
 ionic/components/input/input.ts               | 612 ++++++++++--------
 .../text-input.ts => input/native-input.ts}   |  92 +--
 .../input/test/fixed-inline-labels/index.ts   |   8 +-
 .../input/test/fixed-inline-labels/main.html  | 103 +--
 .../input/test/floating-labels/main.html      |  80 +--
 .../input/test/form-inputs/main.html          |  72 +--
 .../input/test/inline-labels/main.html        |  92 +--
 .../input/test/input-focus/main.html          | 100 +--
 .../input/test/inset-inputs/main.html         |  48 +-
 .../input/test/placeholder-labels/main.html   |  64 +-
 .../input/test/stacked-labels/main.html       |  84 +--
 ionic/components/item/item-media.scss         |  10 +
 ionic/components/item/item-sliding.ts         |   6 +-
 ionic/components/item/item.ios.scss           |   6 +-
 ionic/components/item/item.md.scss            |   6 +-
 ionic/components/item/item.scss               |   8 +-
 ionic/components/item/item.ts                 | 105 ++-
 ionic/components/item/test/dividers/main.html |  12 +-
 ionic/components/item/test/text/main.html     |  12 +-
 ionic/components/label/label.ios.scss         |  22 +-
 ionic/components/label/label.md.scss          |  20 +-
 ionic/components/label/label.scss             |  25 +-
 ionic/components/label/label.ts               |  76 ++-
 ionic/components/list/list.md.scss            |   2 +-
 ionic/components/option/option.ts             |  20 +-
 ionic/components/radio/radio-button.ts        | 140 ++++
 ionic/components/radio/radio-group.ts         | 167 +++++
 ...s~3d61141c0391dbefcc6565ad94ab918ba2fff603 | 167 +++++
 ionic/components/radio/radio-group.ts~HEAD    | 167 +++++
 ionic/components/radio/radio.ios.scss         |  98 +--
 ionic/components/radio/radio.md.scss          | 110 ++--
 ionic/components/radio/radio.ts               | 261 --------
 ionic/components/radio/test/basic/e2e.ts      |   2 +-
 ionic/components/radio/test/basic/main.html   |  58 +-
 ionic/components/select/select.ios.scss       |  10 +
 ionic/components/select/select.md.scss        |  10 +
 ionic/components/select/select.scss           |  42 +-
 ionic/components/select/select.ts             | 132 ++--
 .../select/test/multiple-value/main.html      |  48 +-
 .../select/test/single-value/main.html        | 103 ++-
 ionic/components/toggle/test/basic/main.html  |  42 +-
 ionic/components/toggle/toggle.ios.scss       | 155 +++--
 ionic/components/toggle/toggle.md.scss        |  89 +--
 ionic/components/toggle/toggle.ts             | 228 ++++---
 ionic/config/directives.ts                    |   9 +-
 ionic/util/form.ts                            |   8 +-
 ionic/util/util.scss                          |  18 +-
 scripts/snapshot/snapshot.config.js           |   4 +-
 60 files changed, 2528 insertions(+), 1727 deletions(-)
 rename ionic/components/{text-input/text-input.ts => input/native-input.ts} (51%)
 create mode 100644 ionic/components/radio/radio-button.ts
 create mode 100644 ionic/components/radio/radio-group.ts
 create mode 100644 ionic/components/radio/radio-group.ts~3d61141c0391dbefcc6565ad94ab918ba2fff603
 create mode 100644 ionic/components/radio/radio-group.ts~HEAD
 delete mode 100644 ionic/components/radio/radio.ts

diff --git a/ionic/animations/scroll-to.ts b/ionic/animations/scroll-to.ts
index c80516356d..39ee81fae1 100644
--- a/ionic/animations/scroll-to.ts
+++ b/ionic/animations/scroll-to.ts
@@ -43,6 +43,8 @@ export class ScrollTo {
     let xDistance = Math.abs(x - fromX);
     let yDistance = Math.abs(y - fromY);
 
+    console.debug(`scrollTo start, y: ${y}, fromY: ${fromY}, yDistance: ${yDistance}, duration: ${duration}, tolerance: ${tolerance}`);
+
     if (yDistance <= tolerance && xDistance <= tolerance) {
       // prevent scrolling if already close to there
       self._el = null;
@@ -50,16 +52,7 @@ export class ScrollTo {
     }
 
     return new Promise((resolve, reject) => {
-      let start;
-
-      // start scroll loop
-      self.isPlaying = true;
-
-      // chill out for a frame first
-      raf(() => {
-        start = Date.now();
-        raf(step);
-      });
+      let startTime: number;
 
       // scroll loop
       function step() {
@@ -67,19 +60,22 @@ export class ScrollTo {
           return resolve();
         }
 
-        let time = Math.min(1, ((Date.now() - start) / duration));
+        let time = Math.min(1, ((Date.now() - startTime) / duration));
 
         // where .5 would be 50% of time on a linear scale easedT gives a
         // fraction based on the easing method
         let easedT = easeOutCubic(time);
 
         if (fromY != y) {
-          self._el.scrollTop = Math.round((easedT * (y - fromY)) + fromY);
+          self._el.scrollTop = (easedT * (y - fromY)) + fromY;
         }
+
         if (fromX != x) {
           self._el.scrollLeft = Math.round((easedT * (x - fromX)) + fromX);
         }
 
+        console.debug(`scrollTo step, easedT: ${easedT}, scrollTop: ${self._el.scrollTop}`);
+
         if (time < 1 && self.isPlaying) {
           raf(step);
 
@@ -91,10 +87,20 @@ export class ScrollTo {
         } else {
           // done
           self._el = null;
+          console.debug(`scrollTo done`);
           resolve();
         }
       }
 
+      // start scroll loop
+      self.isPlaying = true;
+
+      // chill out for a frame first
+      raf(() => {
+        startTime = Date.now();
+        raf(step);
+      });
+
     });
   }
 
diff --git a/ionic/components.ts b/ionic/components.ts
index a7d1d36437..acfe79c892 100644
--- a/ionic/components.ts
+++ b/ionic/components.ts
@@ -28,7 +28,8 @@ export * from './components/navbar/navbar'
 export * from './components/option/option'
 export * from './components/overlay/overlay'
 export * from './components/slides/slides'
-export * from './components/radio/radio'
+export * from './components/radio/radio-button'
+export * from './components/radio/radio-group'
 export * from './components/scroll/scroll'
 export * from './components/scroll/pull-to-refresh'
 export * from './components/searchbar/searchbar'
@@ -37,6 +38,5 @@ export * from './components/select/select'
 export * from './components/tabs/tabs'
 export * from './components/tabs/tab'
 export * from './components/tap-click/tap-click'
-export * from './components/text-input/text-input'
 export * from './components/toggle/toggle'
 export * from './components/toolbar/toolbar'
diff --git a/ionic/components/card/card.ios.scss b/ionic/components/card/card.ios.scss
index 736a7c02c5..68209993f5 100644
--- a/ionic/components/card/card.ios.scss
+++ b/ionic/components/card/card.ios.scss
@@ -48,7 +48,7 @@ ion-card {
       padding-right: 0;
     }
 
-    ion-item-content {
+    ion-label {
       padding: 0;
     }
 
diff --git a/ionic/components/card/card.md.scss b/ionic/components/card/card.md.scss
index 4aa2b8d3b4..35df38e784 100644
--- a/ionic/components/card/card.md.scss
+++ b/ionic/components/card/card.md.scss
@@ -47,7 +47,7 @@ ion-card {
   ion-list {
     margin-bottom: 0;
 
-    ion-item-content {
+    ion-label {
       padding: 0;
     }
 
diff --git a/ionic/components/checkbox/checkbox.ios.scss b/ionic/components/checkbox/checkbox.ios.scss
index 9bef5cc5e6..cc5c52a66b 100644
--- a/ionic/components/checkbox/checkbox.ios.scss
+++ b/ionic/components/checkbox/checkbox.ios.scss
@@ -1,9 +1,8 @@
 @import "../../globals.ios";
 
-// iOS Checkbox Structure
+// iOS Checkbox
 // --------------------------------------------------
 
-
 $checkbox-ios-background-color-off:       $list-ios-background-color !default;
 $checkbox-ios-background-color-on:        map-get($colors-ios, primary) !default;
 
@@ -21,52 +20,13 @@ $checkbox-ios-icon-checkmark-color:       $background-ios-color !default;
 $checkbox-ios-media-margin:               $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default;
 
 $checkbox-ios-disabled-opacity:           0.5 !default;
-$checkbox-ios-disabled-text-color:        $subdued-text-ios-color !default;
 
 
-ion-checkbox {
-  cursor: pointer;
-  @include user-select-none();
-
-  &[aria-checked=true] .checkbox-icon {
-    background-color: $checkbox-ios-background-color-on;
-    border-color: $checkbox-ios-icon-border-color-on;
-  }
-
-  &[aria-checked=true] .checkbox-icon:after {
-    position: absolute;
-    border-width: $checkbox-ios-icon-checkmark-width;
-    border-style: $checkbox-ios-icon-checkmark-style;
-    border-color: $checkbox-ios-icon-checkmark-color;
-    top: 3px;
-    left: 7px;
-    width: 4px;
-    height: 9px;
-    border-left: none;
-    border-top: none;
-    content: '';
-    transform: rotate(45deg);
-  }
-
-  &.item.activated {
-    background-color: $checkbox-ios-background-color-off;
-  }
-
-}
-
-ion-checkbox[aria-disabled=true] {
-  opacity: $checkbox-ios-disabled-opacity;
-  color: $checkbox-ios-disabled-text-color;
-  pointer-events: none;
-}
-
-.checkbox-media {
-  margin: $checkbox-ios-media-margin;
-}
+// iOS Checkbox Outer Circle: Unchecked
+// -----------------------------------------
 
 .checkbox-icon {
   position: relative;
-  display: block;
   width: $checkbox-ios-icon-size;
   height: $checkbox-ios-icon-size;
   border-radius: $checkbox-ios-icon-border-radius;
@@ -77,16 +37,62 @@ ion-checkbox[aria-disabled=true] {
 }
 
 
+// iOS Checkbox Outer Circle: Checked
+// -----------------------------------------
+
+.checkbox-checked {
+  background-color: $checkbox-ios-background-color-on;
+  border-color: $checkbox-ios-icon-border-color-on;
+}
+
+
+// iOS Checkbox Inner Checkmark: Checked
+// -----------------------------------------
+
+.checkbox-checked .checkbox-inner {
+  position: absolute;
+  border-width: $checkbox-ios-icon-checkmark-width;
+  border-style: $checkbox-ios-icon-checkmark-style;
+  border-color: $checkbox-ios-icon-checkmark-color;
+  top: 4px;
+  left: 7px;
+  width: 4px;
+  height: 9px;
+  border-left: none;
+  border-top: none;
+  transform: rotate(45deg);
+}
+
+
+// iOS Checkbox: Disabled
+// -----------------------------------------
+
+.checkbox-disabled,
+.item-checkbox-disabled ion-label {
+  opacity: $checkbox-ios-disabled-opacity;
+  pointer-events: none;
+}
+
+
+// iOS Checkbox Within An Item
+// -----------------------------------------
+
+.item ion-checkbox {
+  display: block;
+  margin: $checkbox-ios-media-margin;
+}
+
+
 // iOS Checkbox Color Mixin
 // --------------------------------------------------
 
 @mixin checkbox-theme-ios($color-name, $bg-on) {
 
-  ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
+  ion-checkbox[#{$color-name}] .checkbox-checked {
     background-color: $bg-on;
     border-color: $bg-on;
 
-    &:after {
+    .checkbox-inner {
       border-color: inverse($bg-on);
     }
   }
diff --git a/ionic/components/checkbox/checkbox.md.scss b/ionic/components/checkbox/checkbox.md.scss
index 8394396f84..fd752c0082 100644
--- a/ionic/components/checkbox/checkbox.md.scss
+++ b/ionic/components/checkbox/checkbox.md.scss
@@ -10,7 +10,6 @@ $checkbox-md-padding:                    $item-md-padding-top ($item-md-padding-
 $checkbox-md-margin:                     0 !default;
 $checkbox-md-media-margin:               $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px !default;
 $checkbox-md-disabled-opacity:           0.5 !default;
-$checkbox-md-disabled-text-color:        $subdued-text-md-color !default;
 
 $checkbox-md-icon-background-color-off:  $list-md-background-color !default;
 $checkbox-md-icon-background-color-on:   map-get($colors-md, primary) !default;
@@ -27,54 +26,8 @@ $checkbox-md-icon-border-color-off:      darken($list-md-border-color, 40%) !def
 $checkbox-md-icon-border-color-on:       map-get($colors-md, primary) !default;
 
 
-ion-checkbox {
-  cursor: pointer;
-  @include user-select-none();
-
-  &.item .item-inner {
-    border: none;
-    padding-right: 0;
-  }
-
-  ion-item-content {
-    border-bottom-width: $checkbox-md-border-bottom-width;
-    border-bottom-style: $checkbox-md-border-bottom-style;
-    border-bottom-color: $checkbox-md-border-bottom-color;
-    margin: $checkbox-md-margin;
-    padding: $checkbox-md-padding;
-  }
-
-  &[aria-checked=true] .checkbox-icon {
-    background-color: $checkbox-md-icon-background-color-on;
-    border-color: $checkbox-md-icon-border-color-on;
-  }
-
-  &[aria-checked=true] .checkbox-icon:after {
-    position: absolute;
-    border-width: $checkbox-md-icon-checkmark-width;
-    border-style: $checkbox-md-icon-checkmark-style;
-    border-color: $checkbox-md-icon-checkmark-color;
-    top: 0;
-    left: 3px;
-    width: 4px;
-    height: 8px;
-    border-left: none;
-    border-top: none;
-    content: '';
-    transform: rotate(45deg);
-  }
-
-}
-
-ion-checkbox[aria-disabled=true] {
-  opacity: $checkbox-md-disabled-opacity;
-  color: $checkbox-md-disabled-text-color;
-  pointer-events: none;
-}
-
-.checkbox-media {
-  margin: $checkbox-md-media-margin;
-}
+// Material Design Checkbox Outer Square: Unchecked
+// -----------------------------------------
 
 .checkbox-icon {
   position: relative;
@@ -88,16 +41,61 @@ ion-checkbox[aria-disabled=true] {
 }
 
 
+// Material Design Checkbox Outer Square: Checked
+// -----------------------------------------
+
+.checkbox-checked {
+  background-color: $checkbox-md-icon-background-color-on;
+  border-color: $checkbox-md-icon-border-color-on;
+}
+
+
+// Material Design Checkbox Inner Checkmark: Checked
+// -----------------------------------------
+
+.checkbox-checked .checkbox-inner {
+  position: absolute;
+  border-width: $checkbox-md-icon-checkmark-width;
+  border-style: $checkbox-md-icon-checkmark-style;
+  border-color: $checkbox-md-icon-checkmark-color;
+  top: 0;
+  left: 4px;
+  width: 5px;
+  height: 10px;
+  border-left: none;
+  border-top: none;
+  transform: rotate(45deg);
+}
+
+
+// Material Design Checkbox: Disabled
+// -----------------------------------------
+
+.checkbox-disabled,
+.item-checkbox-disabled ion-label {
+  opacity: $checkbox-md-disabled-opacity;
+  pointer-events: none;
+}
+
+
+// Material Design Checkbox within an item
+// -----------------------------------------
+
+.item ion-checkbox {
+  margin: $checkbox-md-media-margin;
+}
+
+
 // Material Design Checkbox Color Mixin
 // --------------------------------------------------
 
 @mixin checkbox-theme-md($color-name, $bg-on) {
 
-  ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
+  ion-checkbox[#{$color-name}] .checkbox-checked {
     background-color: $bg-on;
     border-color: $bg-on;
 
-    &:after {
+    .checkbox-inner {
       border-color: inverse($bg-on);
     }
   }
diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index 71c0cb1ac1..6c3e88d35b 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -1,10 +1,13 @@
-import {Component, Directive, Optional, ElementRef, Input, Renderer, HostListener} from 'angular2/core';
+import {Component, Optional, Input, HostListener} from 'angular2/core';
 import {NgControl} from 'angular2/common';
 
 import {Form} from '../../util/form';
+import {Item} from '../item/item';
 
 /**
- * The checkbox is no different than the HTML checkbox input, except it's styled differently.
+ * The checkbox is no different than the HTML checkbox input, except
+ * it's styled accordingly to the the platform and design mode, such
+ * as iOS or Material Design.
  *
  * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/core/Form-interface.html) for more info on forms and input.
  *
@@ -14,44 +17,58 @@ import {Form} from '../../util/form';
  *
  * @usage
  * ```html
- * <ion-checkbox checked="true" value="isChecked" ngControl="htmlCtrl">
- *   HTML5
- * </ion-checkbox>
+ *
+ *  <ion-list>
+ *
+ *    <ion-item>
+ *      <ion-label>Pepperoni</ion-label>
+ *      <ion-checkbox value="pepperoni" checked="true"></ion-checkbox>
+ *    </ion-item>
+ *
+ *    <ion-item>
+ *      <ion-label>Sausage</ion-label>
+ *      <ion-checkbox value="sausage"></ion-checkbox>
+ *    </ion-item>
+ *
+ *    <ion-item>
+ *      <ion-label>Mushrooms</ion-label>
+ *      <ion-checkbox value="mushrooms"></ion-checkbox>
+ *    </ion-item>
+ *
+ *  </ion-list>
  * ```
  * @demo /docs/v2/demos/checkbox/
  * @see {@link /docs/v2/components#checkbox Checkbox Component Docs}
  */
 @Component({
   selector: 'ion-checkbox',
-  host: {
-    'role': 'checkbox',
-    'class': 'item',
-    'tappable': '',
-    'tabindex': '0',
-    '[attr.aria-disabled]': 'disabled'
-  },
   template:
-    '<div class="item-inner">' +
-      '<div class="checkbox-media" disable-activated>' +
-        '<div class="checkbox-icon"></div>' +
-      '</div>' +
-      '<ion-item-content id="{{_labelId}}">' +
-        '<ng-content></ng-content>' +
-      '</ion-item-content>' +
-    '</div>'
+    '<div class="checkbox-icon" [class.checkbox-checked]="_checked">' +
+      '<div class="checkbox-inner"></div>' +
+    '</div>' +
+    '<button role="checkbox" ' +
+            '[id]="id" ' +
+            '[attr.aria-checked]="_checked" ' +
+            '[attr.aria-labelledby]="_labelId" ' +
+            '[attr.aria-disabled]="_disabled" ' +
+            'class="item-cover">' +
+    '</button>',
+  host: {
+    '[class.checkbox-disabled]': '_disabled'
+  }
 })
 export class Checkbox {
-  private _checked: boolean;
+  private _checked: any = false;
+  private _disabled: any = false;
   private _labelId: string;
 
+  id: string;
+
   @Input() value: string = '';
-  @Input() disabled: boolean = false;
-  @Input() id: string;
 
   constructor(
     private _form: Form,
-    private _elementRef: ElementRef,
-    private _renderer: Renderer,
+    @Optional() private _item: Item,
     @Optional() ngControl: NgControl
   ) {
     _form.register(this);
@@ -59,19 +76,11 @@ export class Checkbox {
     if (ngControl) {
       ngControl.valueAccessor = this;
     }
-  }
 
-  /**
-   * @private
-   */
-  ngOnInit() {
-    if (!this.id) {
-      this.id = 'chk-' + this._form.nextId();
-      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', this.id);
+    if (_item) {
+      this.id = 'chk-' + _item.registerInput('checkbox');
+      this._labelId = 'lbl-' + _item.id;
     }
-
-    this._labelId = 'lbl-' + this.id;
-    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', this._labelId);
   }
 
   /**
@@ -82,22 +91,35 @@ export class Checkbox {
     this.checked = !this.checked;
   }
 
-  @Input()
-  get checked(): boolean {
-    return !!this._checked;
+  get checked() {
+    return this._checked;
   }
 
+  @Input()
   set checked(val) {
-    this._checked = !!val;
-    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-checked', this._checked.toString());
-    this.onChange(this._checked);
+    if (!this._disabled) {
+      this._checked = (val === true || val === 'true');
+      this.onChange(this._checked);
+      this._item && this._item.setCssClass('item-checkbox-checked', this._checked);
+    }
+  }
+
+  get disabled() {
+    return this._disabled;
+  }
+
+  @Input()
+  set disabled(val) {
+    this._disabled = (val === true || val === 'true');
+    this._item && this._item.setCssClass('item-checkbox-disabled', this._disabled);
   }
 
   /**
    * @private
    */
   @HostListener('click', ['$event'])
-  _click(ev) {
+  private _click(ev) {
+    console.debug('checkbox, checked', this.value);
     ev.preventDefault();
     ev.stopPropagation();
     this.toggle();
diff --git a/ionic/components/checkbox/test/basic/e2e.ts b/ionic/components/checkbox/test/basic/e2e.ts
index 713c06fa10..5dcfccb886 100644
--- a/ionic/components/checkbox/test/basic/e2e.ts
+++ b/ionic/components/checkbox/test/basic/e2e.ts
@@ -1,6 +1,6 @@
 
 it('should check apple, enable/check grape, submit form', function() {
-  element(by.css('[ngControl=appleCtrl] .checkbox-media')).click();
+  element(by.css('[ngControl=appleCtrl] button')).click();
   element(by.css('.e2eGrapeDisabled')).click();
   element(by.css('.e2eGrapeChecked')).click();
   element(by.css('.e2eSubmit')).click();
diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html
index a2a16cb0d8..4badb5ec30 100644
--- a/ionic/components/checkbox/test/basic/main.html
+++ b/ionic/components/checkbox/test/basic/main.html
@@ -8,29 +8,35 @@
 
     <ion-list>
 
-      <ion-checkbox value="apple" checked="true" ngControl="appleCtrl">
-        Apple, value=apple, init checked
-      </ion-checkbox>
+      <ion-item>
+        <ion-label>Apple, value=apple, init checked</ion-label>
+        <ion-checkbox value="apple" checked="true" ngControl="appleCtrl"></ion-checkbox>
+      </ion-item>
 
-      <ion-checkbox ngControl="bananaCtrl">
-        Banana, init no checked/value attributes
-      </ion-checkbox>
+      <ion-item>
+        <ion-label>Banana, init no checked/value attributes</ion-label>
+        <ion-checkbox ngControl="bananaCtrl"></ion-checkbox>
+      </ion-item>
 
-      <ion-checkbox value="cherry" disabled="true" ngControl="cherryCtrl">
-        Cherry, value=cherry, init disabled
-      </ion-checkbox>
+      <ion-item>
+        <ion-label>Cherry, value=cherry, init disabled</ion-label>
+        <ion-checkbox value="cherry" disabled="true" ngControl="cherryCtrl"></ion-checkbox>
+      </ion-item>
 
-      <ion-checkbox value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ngControl="grapeCtrl">
-        Grape, value=grape, init checked, disabled
-      </ion-checkbox>
+      <ion-item>
+        <ion-label>Grape, value=grape, init checked, disabled</ion-label>
+        <ion-checkbox value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ngControl="grapeCtrl"></ion-checkbox>
+      </ion-item>
 
-      <ion-checkbox secondary checked="true">
-        secondary color
-      </ion-checkbox>
+      <ion-item>
+        <ion-label>secondary color</ion-label>
+        <ion-checkbox secondary checked="true"></ion-checkbox>
+      </ion-item>
 
-      <ion-checkbox light checked="true">
-        light color
-      </ion-checkbox>
+      <ion-item>
+        <ion-label>light color</ion-label>
+        <ion-checkbox light checked="true"></ion-checkbox>
+      </ion-item>
 
     </ion-list>
 
diff --git a/ionic/components/input/input.ios.scss b/ionic/components/input/input.ios.scss
index a5a24a20ee..c95d93bb55 100644
--- a/ionic/components/input/input.ios.scss
+++ b/ionic/components/input/input.ios.scss
@@ -12,17 +12,16 @@ $text-input-ios-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/s
 $text-input-ios-input-clear-icon-size:     18px !default;
 
 
-// Default Input
+// iOS Default Input
 // --------------------------------------------------
 
-.item-input {
+.text-input {
   margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
   padding: 0;
-  background-color: $text-input-ios-background-color;
 }
 
 
-// Inset Input
+// iOS Inset Input
 // --------------------------------------------------
 
 .inset-input {
@@ -31,7 +30,7 @@ $text-input-ios-input-clear-icon-size:     18px !default;
 }
 
 
-// Stacked & Floating Inputs
+// iOS Stacked & Floating Inputs
 // --------------------------------------------------
 
 .stacked-input,
@@ -40,7 +39,7 @@ $text-input-ios-input-clear-icon-size:     18px !default;
   margin-bottom: 8px;
 }
 
-// Clear Input Icon
+// iOS Clear Input Icon
 // --------------------------------------------------
 
 ion-input[clearInput] {
diff --git a/ionic/components/input/input.md.scss b/ionic/components/input/input.md.scss
index ff5062be45..357cdfb67a 100644
--- a/ionic/components/input/input.md.scss
+++ b/ionic/components/input/input.md.scss
@@ -16,17 +16,16 @@ $text-input-md-input-clear-icon-size:       22px !default;
 
 
 
-// Default Input
+// Material Design Default Input
 // --------------------------------------------------
 
-.item-input {
+.text-input {
   margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
   padding: 0;
-  background-color: $text-input-md-background-color;
 }
 
 
-// Inset Input
+// Material Design Inset Input
 // --------------------------------------------------
 
 .inset-input {
@@ -35,7 +34,7 @@ $text-input-md-input-clear-icon-size:       22px !default;
 }
 
 
-// Highlighted Input
+// Material Design Highlighted Input
 // --------------------------------------------------
 
 ion-input:after {
@@ -49,7 +48,7 @@ ion-input:after {
   content: '';
 }
 
-.input-focused:after {
+.input-has-focus:after {
   border-bottom-color: $text-input-md-highlight-color;
 }
 
@@ -62,7 +61,7 @@ ion-input.ng-invalid.ng-touched:after {
 }
 
 
-// Stacked & Floating Inputs
+// Material Design Stacked & Floating Inputs
 // --------------------------------------------------
 
 .stacked-input,
@@ -73,7 +72,7 @@ ion-input.ng-invalid.ng-touched:after {
 }
 
 
-// Clear Input Icon
+// Material Design Clear Input Icon
 // --------------------------------------------------
 
 ion-input[clearInput] {
diff --git a/ionic/components/input/input.scss b/ionic/components/input/input.scss
index 3c4cac6df0..7a1b4605ad 100644
--- a/ionic/components/input/input.scss
+++ b/ionic/components/input/input.scss
@@ -1,48 +1,79 @@
 @import "../../globals.core";
 
-// Input
+// Input Wrapper
 // --------------------------------------------------
 
-.item-input {
+ion-input {
   display: block;
+  flex: 1;
+}
+
+
+// Native Text Input
+// --------------------------------------------------
+
+.text-input {
+  display: inline-block;
   background: transparent;
   border: 0;
+  border-radius: 0;
   flex: 1;
-  pointer-events: none;
-}
-
-input.item-input:-webkit-autofill {
-  background-color: transparent;
-}
-
-input,
-textarea {
+  width: 92%;
+  width: calc(100% - 10px);
+  -webkit-appearance: none;
   @include placeholder();
 }
 
-.platform-mobile textarea {
+
+input.text-input:-webkit-autofill {
+  background-color: transparent;
+}
+
+.platform-mobile textarea.text-input {
   resize: none;
 }
 
 
-// Scroll Assist
+// Input Cover: Unfocused
 // --------------------------------------------------
+// The input cover is the div that actually receives the
+// tap/click event when scroll assist is configured to true.
+// This make it so the native input element is not clickable.
+// This will only show when the scroll assist is configured
+// otherwise the .input-cover will not be rendered at all
 
-[scroll-assist] {
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  pointer-events: none;
+.input-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 
-// Input focused
+// Input Cover: Focused
 // --------------------------------------------------
+// When the input has focus, then the input cover should be hidden
 
-.input-focused .item-input {
-  pointer-events: auto;
+.input-has-focus .input-cover {
+  display: none;
+}
+
+
+// Scroll Assist Input
+// --------------------------------------------------
+// This input is used to help the app handle
+// Next and Previous input tabbing
+
+[next-input] {
+  position: absolute;
+  bottom: 1px;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  pointer-events: none;
 }
 
 
@@ -50,10 +81,21 @@ textarea {
 // --------------------------------------------------
 
 .text-input-clear-icon {
+  position: absolute;
   margin: 0;
   padding: 0;
 
   background-repeat: no-repeat;
   background-position: center;
-  position: absolute;
 }
+
+
+// Cloned Input
+// --------------------------------------------------
+
+.text-input.cloned-input,
+.text-input.cloned-hidden {
+  position: absolute;
+  top: 0;
+  pointer-events: none;
+}
\ No newline at end of file
diff --git a/ionic/components/input/input.ts b/ionic/components/input/input.ts
index 43020401f6..763d905435 100644
--- a/ionic/components/input/input.ts
+++ b/ionic/components/input/input.ts
@@ -1,17 +1,18 @@
-import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer, Input, ContentChild, ContentChildren, HostListener} from 'angular2/core';
-import {NgIf} from 'angular2/common';
+import {Component, Directive, Attribute, forwardRef, QueryList, Host, Optional, ElementRef, Renderer, Input, Output, EventEmitter, ViewChild, ViewChildren, ContentChild, ContentChildren, HostListener} from 'angular2/core';
+import {NgIf, NgControl} from 'angular2/common';
 
 import {NavController} from '../nav/nav-controller';
 import {Config} from '../../config/config';
 import {Form} from '../../util/form';
+import {Item} from '../item/item';
 import {Label} from '../label/label';
-import {TextInput} from '../text-input/text-input';
 import {IonicApp} from '../app/app';
 import {Content} from '../content/content';
-import {pointerCoord, hasPointerMoved}  from '../../util/dom';
+import {pointerCoord, hasPointerMoved, closest}  from '../../util/dom';
 import {Platform} from '../../platform/platform';
 import {Button} from '../button/button';
 import {Icon} from '../icon/icon';
+import {NativeInput} from './native-input';
 
 
 /**
@@ -19,247 +20,313 @@ import {Icon} from '../icon/icon';
  * @module ionic
  * @description
  *
- * `ion-input` is a generic wrapper for both inputs and textareas. You can give `ion-input` attributes to tell it how to handle a child `ion-label` component.
+ * `ion-input` is a wrapper for text inputs and textareas. An
+ * `ion-input` is for text input types only, such as `text`,
+ * `password`, `email`, `number`, `search`, `tel`, `url` and `textarea`.
+
+ * An `ion-input` is **not** used for non-text type inputs, such as a
+ * `checkbox`, `radio`, `toggle`, `range`, `select`, etc.
  *
- * @property [fixed-label] - a persistant label that sits next the the input
- * @property [floating-label] - a label that will float about the input if the input is empty of looses focus
- * @property [stacked-label] - A stacked label will always appear on top of the input
  * @property [inset] - The input will be inset
  * @property [clearInput] - A clear icon will appear in the input which clears it
  *
  * @usage
  * ```html
- *  <ion-input>
+ *  <ion-item>
  *    <ion-label>Username</ion-label>
- *    <input type="text" value="">
- *  </ion-input>
+ *    <ion-input></ion-input>
+ *  </ion-item>
  *
- *  <ion-input clearInput>
- *    <input type="text" placeholder="Username">
- *  </ion-input>
+ *  <ion-item>
+ *    <ion-labe fixed>Website</ion-label>
+ *    <ion-input type="url"></ion-input>
+ *  </ion-item>
  *
- *  <ion-input fixed-label>
- *    <ion-label>Username</ion-label>
- *    <input type="text" value="">
- *  </ion-input>
+ *  <ion-item>
+ *    <ion-label floating>Email</ion-label>
+ *    <ion-input type="email"></ion-input>
+ *  </ion-item>
  *
- *  <ion-input floating-label>
- *    <ion-label>Username</ion-label>
- *    <input type="text" value="">
- *  </ion-input>
+ *  <ion-item>
+ *    <ion-label stacked>Phone</ion-label>
+ *    <ion-input type="tel"></ion-input>
+ *  </ion-item>
+ *
+ *  <ion-item clearInput>
+ *    <ion-input placeholder="Username"></ion-input>
+ *  </ion-item>
  * ```
  *
  */
 
-@Component({
-  selector: 'ion-input',
-  host: {
-    '(touchstart)': 'pointerStart($event)',
-    '(touchend)': 'pointerEnd($event)',
-    '(mouseup)': 'pointerEnd($event)',
-    'class': 'item',
-    '[class.ng-untouched]': 'hasClass("ng-untouched")',
-    '[class.ng-touched]': 'hasClass("ng-touched")',
-    '[class.ng-pristine]': 'hasClass("ng-pristine")',
-    '[class.ng-dirty]': 'hasClass("ng-dirty")',
-    '[class.ng-valid]': 'hasClass("ng-valid")',
-    '[class.ng-invalid]': 'hasClass("ng-invalid")'
-  },
-  template:
-    '<div class="item-inner">' +
-      '<ng-content></ng-content>' +
-      '<input [type]="type" aria-hidden="true" scroll-assist *ngIf="_assist">' +
-      '<button clear *ngIf="clearInput && value" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' +
-    '</div>',
-  directives: [NgIf, forwardRef(() => InputScrollAssist), TextInput, Button]
+
+/**
+ * @private
+ */
+@Directive({
+  selector: '[next-input]'
 })
-export class ItemInput {
-  private _assist: boolean;
-  private input: TextInput;
-  private label: Label;
-  private scrollMove: EventListener;
-  private startCoord: {x: number, y: number};
-  private deregScroll: () => void;
+class NextInput {
 
-  keyboardHeight: number;
-  value: string = '';
-  type: string = null;
-  lastTouch: number = 0;
-  displayType: string;
+  @Output() focused: EventEmitter<boolean> = new EventEmitter();
 
-  @Input() clearInput: any;
+  @HostListener('focus')
+  receivedFocus() {
+    this.focused.emit(true);
+  }
+
+}
+
+export class TextInputBase {
+  protected _coord;
+  protected _deregScroll;
+  protected _keyboardHeight;
+  protected _scrollMove: EventListener;
+  protected _type: string = 'text';
+  protected _useAssist: boolean = true;
+  protected _value = '';
+  protected _isTouch: boolean;
+
+  inputControl: NgControl;
+
+  @Input() clearInput;
+  @Input() placeholder: string = '';
+  @ViewChild(NativeInput) protected _native: NativeInput;
 
   constructor(
     config: Config,
-    private _form: Form,
-    private _renderer: Renderer,
-    private _elementRef: ElementRef,
-    private _app: IonicApp,
-    private _platform: Platform,
-    @Optional() @Host() private _scrollView: Content,
-    @Optional() private _nav: NavController,
-    @Attribute('floating-label') isFloating: string,
-    @Attribute('stacked-label') isStacked: string,
-    @Attribute('fixed-label') isFixed: string,
-    @Attribute('inset') isInset: string
+    protected _form: Form,
+    protected _item: Item,
+    protected _app: IonicApp,
+    protected _platform: Platform,
+    protected _elementRef: ElementRef,
+    protected _scrollView: Content,
+    protected _nav: NavController,
+    ngControl: NgControl
   ) {
+    this._useAssist = true;// config.get('scrollAssist');
+    this._keyboardHeight = config.get('keyboardHeight');
+
+    if (ngControl) {
+      ngControl.valueAccessor = this;
+    }
+
     _form.register(this);
-
-    //TODO make more gud with pending @Attributes API
-    this.displayType = (isFloating === '' ? 'floating' : (isStacked === '' ? 'stacked' : (isFixed === '' ? 'fixed' : (isInset === '' ? 'inset' : null))));
-
-    this._assist = config.get('scrollAssist');
-    this.keyboardHeight = config.get('keyboardHeight');
   }
 
-  /**
-   * @private
-   */
-  @ContentChild(TextInput)
-  set _setInput(textInput: TextInput) {
-    if (textInput) {
-      textInput.addClass('item-input');
-      if (this.displayType) {
-        textInput.addClass(this.displayType + '-input');
-      }
-      this.input = textInput;
-      this.type = textInput.type;
-
-      this.hasValue(this.input.value);
-      textInput.valueChange.subscribe(inputValue => {
-        this.hasValue(inputValue);
-      });
-
-      this.focusChange(this.hasFocus());
-      textInput.focusChange.subscribe(textInputHasFocus => {
-        this.focusChange(textInputHasFocus);
-      });
-    }
-  }
-
-  /**
-   * @private
-   */
-  @ContentChild(Label)
-  set _setLabel(label: Label) {
-    if (label && this.displayType) {
-      label.addClass(this.displayType + '-label');
-    }
-    this.label = label;
-  }
-
-  /**
-   * @private
-   */
-  @ContentChildren(Button)
-  set _buttons(buttons) {
-    buttons.toArray().forEach(button => {
-      if (!button.isItem) {
-        button.addClass('item-button');
-      }
-    });
-  }
-
-  /**
-   * @private
-   */
-  @ContentChildren(Icon)
-  set _icons(icons) {
-    icons.toArray().forEach(icon => {
-      icon.addClass('item-icon');
-    });
-  }
-
-  /**
-   * @private
-   * On Initialization check for attributes
-   */
   ngOnInit() {
+    if (this._item) {
+      this._item.setCssClass('item-input', true);
+      this._item.registerInput(this._type);
+    }
+
     let clearInput = this.clearInput;
     if (typeof clearInput === 'string') {
       this.clearInput = (clearInput === '' || clearInput === 'true');
     }
   }
 
-  /**
-   * @private
-   */
-  ngAfterViewInit() {
+  ngAfterContentInit() {
     let self = this;
-    if (self.input && self.label) {
-      // if there is an input and a label
-      // then give the label an ID
-      // and tell the input the ID of who it's labelled by
-      self.input.labelledBy(self.label.id);
-    }
 
-    self.scrollMove = function(ev: UIEvent) {
+    self._scrollMove = function(ev: UIEvent) {
+      // scroll move event listener this instance can reuse
       if (!(self._nav && self._nav.isTransitioning())) {
-        self.deregMove();
+        self.deregScrollMove();
 
         if (self.hasFocus()) {
-          self.input.hideFocus(true);
+          self._native.hideFocus(true);
+
           self._scrollView.onScrollEnd(function() {
-            self.input.hideFocus(false);
+            self._native.hideFocus(false);
 
             if (self.hasFocus()) {
-              self.regMove();
+              // if it still has focus then keep listening
+              self.regScrollMove();
             }
           });
         }
       }
     };
+
+    this.setItemControlCss();
   }
 
-  /**
-    * @private
-   */
-  clearTextInput() {
-    console.log("Should clear input");
-    //console.log(this.textInput.value);
+  ngAfterContentChecked() {
+    this.setItemControlCss();
   }
 
-  /**
-   * @private
-   */
-  pointerStart(ev) {
-    if (this._assist && this._app.isEnabled()) {
-      // remember where the touchstart/mousedown started
-      this.startCoord = pointerCoord(ev);
+  private setItemControlCss() {
+    let item = this._item;
+    let nativeControl = this._native && this._native.ngControl;
+
+    if (item && nativeControl) {
+      item.setCssClass('ng-untouched', nativeControl.untouched);
+      item.setCssClass('ng-touched', nativeControl.touched);
+      item.setCssClass('ng-pristine', nativeControl.pristine);
+      item.setCssClass('ng-dirty', nativeControl.dirty);
+      item.setCssClass('ng-valid', nativeControl.valid);
+      item.setCssClass('ng-invalid', !nativeControl.valid);
+    }
+  }
+
+  ngOnDestroy() {
+    this._form.deregister(this);
+  }
+
+  @Input()
+  get value() {
+    return this._value;
+  }
+
+  set value(val) {
+    this._value = val;
+  }
+
+  @Input()
+  get type() {
+    return this._type;
+  }
+
+  set type(val) {
+    this._type = 'text';
+
+    if (val) {
+      val = val.toLowerCase();
+
+      if (/password|email|number|search|tel|url|date|datetime|datetime-local|month/.test(val)) {
+        this._type = val;
+      }
     }
   }
 
   /**
    * @private
    */
-  pointerEnd(ev) {
-    if (!this._app.isEnabled()) {
+  @ViewChild(NativeInput)
+  private set _nativeInput(nativeInput: NativeInput) {
+    this._native = nativeInput;
+
+    if (this._item && this._item.labelId !== null) {
+      nativeInput.labelledBy(this._item.labelId);
+    }
+
+    nativeInput.valueChange.subscribe(inputValue => {
+      this.onChange(inputValue);
+    });
+
+    this.focusChange(this.hasFocus());
+    nativeInput.focusChange.subscribe(textInputHasFocus => {
+      this.focusChange(textInputHasFocus);
+      if (!textInputHasFocus) {
+        this.onTouched(textInputHasFocus);
+      }
+    });
+  }
+
+  /**
+   * @private
+   */
+  @ViewChild(NextInput)
+  private set _nextInput(nextInput: NextInput) {
+    nextInput.focused.subscribe(() => {
+      this._form.tabFocus(this);
+    });
+  }
+
+  /**
+   * @private
+   * Angular2 Forms API method called by the model (Control) on change to update
+   * the checked value.
+   * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L34
+   */
+  writeValue(value) {
+    this._value = value;
+  }
+
+  /**
+   * @private
+   */
+  onChange(val) {
+    this.checkHasValue(val);
+  }
+
+  /**
+   * @private
+   */
+  onTouched(val) {}
+
+  /**
+   * @private
+   */
+  hasFocus(): boolean {
+    // check if an input has focus or not
+    return this._native.hasFocus();
+  }
+
+  /**
+   * @private
+   */
+  checkHasValue(inputValue) {
+    if (this._item) {
+      this._item.setCssClass('input-has-value', !!(inputValue && inputValue !== ''));
+    }
+  }
+
+  /**
+   * @private
+   */
+  focusChange(inputHasFocus: boolean) {
+    if (this._item) {
+      this._item.setCssClass('input-has-focus', inputHasFocus);
+    }
+    if (!inputHasFocus) {
+      this.deregScrollMove();
+    }
+  }
+
+  private pointerStart(ev) {
+    // input cover touchstart
+    console.debug('scroll assist pointerStart', ev.type);
+
+    if (ev.type === 'touchstart') {
+      this._isTouch = true;
+    }
+
+    if ((this._isTouch || (!this._isTouch && ev.type === 'mousedown')) && this._app.isEnabled()) {
+      // remember where the touchstart/mousedown started
+      this._coord = pointerCoord(ev);
+    }
+  }
+
+  private pointerEnd(ev) {
+    // input cover touchend/mouseup
+    console.debug('scroll assist pointerEnd', ev.type);
+
+    if ((this._isTouch && ev.type === 'mouseup') || !this._app.isEnabled()) {
+      // the app is actively doing something right now
+      // don't try to scroll in the input
       ev.preventDefault();
       ev.stopPropagation();
 
-    } else if (this._assist && ev.type === 'touchend') {
+    } else if (this._coord) {
       // get where the touchend/mouseup ended
       let endCoord = pointerCoord(ev);
 
       // focus this input if the pointer hasn't moved XX pixels
       // and the input doesn't already have focus
-      if (!hasPointerMoved(8, this.startCoord, endCoord) && !this.hasFocus()) {
+      if (!hasPointerMoved(8, this._coord, endCoord) && !this.hasFocus()) {
         ev.preventDefault();
         ev.stopPropagation();
 
+        // begin the input focus process
+        console.debug('initFocus', ev.type);
         this.initFocus();
-
-        // temporarily prevent mouseup's from focusing
-        this.lastTouch = Date.now();
       }
 
-    } else if (this.lastTouch + 999 < Date.now()) {
-      ev.preventDefault();
-      ev.stopPropagation();
-
-      this.setFocus();
-      this.regMove();
     }
+
+    this._coord = null;
   }
 
   /**
@@ -267,21 +334,24 @@ export class ItemInput {
    */
   initFocus() {
     // begin the process of setting focus to the inner input element
-
     let scrollView = this._scrollView;
 
-    if (scrollView && this._assist) {
+    if (scrollView) {
       // this input is inside of a scroll view
 
       // find out if text input should be manually scrolled into view
       let ele = this._elementRef.nativeElement;
+      let itemEle = closest(ele, 'ion-item');
+      if (itemEle) {
+        ele = itemEle;
+      }
 
-      let scrollData = ItemInput.getScrollData(ele.offsetTop, ele.offsetHeight, scrollView.getContentDimensions(), this.keyboardHeight, this._platform.height());
+      let scrollData = TextInput.getScrollData(ele.offsetTop, ele.offsetHeight, scrollView.getContentDimensions(), this._keyboardHeight, this._platform.height());
       if (scrollData.scrollAmount > -3 && scrollData.scrollAmount < 3) {
-        // the text input is in a safe position that doesn't require
-        // it to be scrolled into view, just set focus now
+        // the text input is in a safe position that doesn't
+        // require it to be scrolled into view, just set focus now
         this.setFocus();
-        this.regMove();
+        this.regScrollMove();
         return;
       }
 
@@ -297,51 +367,77 @@ export class ItemInput {
       // temporarily move the focus to the focus holder so the browser
       // doesn't freak out while it's trying to get the input in place
       // at this point the native text input still does not have focus
-      this.input.relocate(true, scrollData.inputSafeY);
+      this._native.relocate(true, scrollData.inputSafeY);
 
       // scroll the input into place
       scrollView.scrollTo(0, scrollData.scrollTo, scrollDuration).then(() => {
         // the scroll view is in the correct position now
         // give the native text input focus
-        this.input.relocate(false);
+        this._native.relocate(false, 0);
+
+        this.setFocus();
 
         // all good, allow clicks again
         this._app.setEnabled(true);
         this._nav && this._nav.setTransitioning(false);
-        this.regMove();
+        this.regScrollMove();
       });
 
     } else {
       // not inside of a scroll view, just focus it
       this.setFocus();
-      this.regMove();
+      this.regScrollMove();
     }
+  }
 
+  /**
+    * @private
+   */
+  clearTextInput() {
+    console.log("Should clear input");
+    //console.log(this.textInput.value);
   }
 
   /**
    * @private
    */
-  setFocus() {
-    if (this.input) {
-      this._form.setAsFocused(this);
+  private setFocus() {
+    // immediately set focus
+    this._form.setAsFocused(this);
 
-      // set focus on the actual input element
-      this.input.setFocus();
+    // set focus on the actual input element
+    this._native.setFocus();
 
-      // ensure the body hasn't scrolled down
-      document.body.scrollTop = 0;
-    }
+    // ensure the body hasn't scrolled down
+    document.body.scrollTop = 0;
   }
 
   /**
    * @private
+   * Angular2 Forms API method called by the view (NgControl) to register the
+   * onChange event handler that updates the model (Control).
+   * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L27
+   * @param {Function} fn  the onChange event handler.
    */
-  regMove() {
-    if (this._assist && this._scrollView) {
+  registerOnChange(fn) { this.onChange = fn; }
+
+  /**
+   * @private
+   * Angular2 Forms API method called by the the view (NgControl) to register
+   * the onTouched event handler that marks model (Control) as touched.
+   * @param {Function} fn  onTouched event handler.
+   */
+  registerOnTouched(fn) { this.onTouched = fn; }
+
+  /**
+   * @private
+   */
+  private regScrollMove() {
+    // register scroll move listener
+    if (this._useAssist && this._scrollView) {
       setTimeout(() => {
-        this.deregMove();
-        this.deregScroll = this._scrollView.addScrollEventListener(this.scrollMove);
+        this.deregScrollMove();
+        this._deregScroll = this._scrollView.addScrollEventListener(this._scrollMove);
       }, 80);
     }
   }
@@ -349,49 +445,13 @@ export class ItemInput {
   /**
    * @private
    */
-  deregMove() {
-    this.deregScroll && this.deregScroll();
+  private deregScrollMove() {
+    // deregister the scroll move listener
+    this._deregScroll && this._deregScroll();
   }
 
-  /**
-   * @private
-   */
-  focusChange(inputHasFocus) {
-    this._renderer.setElementClass(this._elementRef.nativeElement, 'input-focused', inputHasFocus);
-    if (!inputHasFocus) {
-      this.deregMove();
-    }
-  }
-
-  /**
-   * @private
-   */
-  hasFocus() {
-    return !!this.input && this.input.hasFocus();
-  }
-
-  /**
-   * @private
-   */
-  hasValue(inputValue) {
-    let inputHasValue = !!(inputValue && inputValue !== '');
-    this._renderer.setElementClass(this._elementRef.nativeElement, 'input-has-value', inputHasValue);
-  }
-
-  /**
-   * @private
-   * This function is used to add the Angular css classes associated with inputs in forms
-   */
-  hasClass(className) {
-    this.input && this.input.hasClass(className);
-  }
-
-  /**
-   * @private
-   */
-  ngOnDestroy() {
-    this.deregMove();
-    this._form.deregister(this);
+  focusNext() {
+    this._form.tabFocus(this);
   }
 
   /**
@@ -510,31 +570,79 @@ export class ItemInput {
 
     return scrollData;
   }
-
 }
 
-/**
- * @private
- */
-@Directive({
-  selector: '[scroll-assist]'
+@Component({
+  selector: 'ion-input',
+  template:
+    '<input [type]="type" [(ngModel)]="_value" [placeholder]="placeholder" class="text-input">' +
+    '<input [type]="type" aria-hidden="true" next-input *ngIf="_useAssist">' +
+    '<button clear *ngIf="clearInput && value" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' +
+    '<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" *ngIf="_useAssist"></div>',
+  directives: [
+    NgIf,
+    forwardRef(() => NextInput),
+    NativeInput,
+    Button
+  ]
 })
-class InputScrollAssist {
+export class TextInput extends TextInputBase {
+  constructor(
+    config: Config,
+    form: Form,
+    item: Item,
+    app: IonicApp,
+    platform: Platform,
+    elementRef: ElementRef,
+    @Optional() scrollView: Content,
+    @Optional() nav: NavController,
+    @Optional() ngControl: NgControl
+  ) {
+    super(config, form, item, app, platform, elementRef, scrollView, nav, ngControl);
+  }
+}
 
-  constructor(private _form: Form, private _input: ItemInput) {}
 
-  @HostListener('focus')
-  receivedFocus() {
-    this._form.focusNext(this._input);
+@Component({
+  selector: 'ion-textarea',
+  template:
+    '<textarea [(ngModel)]="_value" [placeholder]="placeholder" class="text-input"></textarea>' +
+    '<input type="text" aria-hidden="true" next-input *ngIf="_useAssist">' +
+    '<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" *ngIf="_useAssist"></div>',
+  directives: [
+    NgIf,
+    forwardRef(() => NextInput),
+    NativeInput
+  ]
+})
+export class TextArea extends TextInputBase {
+  constructor(
+    config: Config,
+    form: Form,
+    item: Item,
+    app: IonicApp,
+    platform: Platform,
+    elementRef: ElementRef,
+    @Optional() scrollView: Content,
+    @Optional() nav: NavController,
+    @Optional() ngControl: NgControl
+  ) {
+    super(config, form, item, app, platform, elementRef, scrollView, nav, ngControl);
   }
 
+  ngOnInit() {
+    super.ngOnInit();
+    if (this._item) {
+      this._item.setCssClass('item-textarea', true);
+    }
+  }
 }
 
-const SCROLL_ASSIST_SPEED = 0.4;
+const SCROLL_ASSIST_SPEED = 0.3;
 
 function getScrollAssistDuration(distanceToScroll) {
   //return 3000;
   distanceToScroll = Math.abs(distanceToScroll);
   let duration = distanceToScroll / SCROLL_ASSIST_SPEED;
-  return Math.min(400, Math.max(100, duration));
+  return Math.min(400, Math.max(150, duration));
 }
diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/input/native-input.ts
similarity index 51%
rename from ionic/components/text-input/text-input.ts
rename to ionic/components/input/native-input.ts
index 899eafe5c2..16bed35236 100644
--- a/ionic/components/text-input/text-input.ts
+++ b/ionic/components/input/native-input.ts
@@ -1,51 +1,32 @@
 import {Directive, Attribute, ElementRef, Renderer, Input, Output, EventEmitter, HostListener} from 'angular2/core';
+import {NgControl} from 'angular2/common';
 
-import {CSS, hasFocus}  from '../../util/dom';
+import {CSS, hasFocus, raf}  from '../../util/dom';
 
 
 /**
  * @private
  */
 @Directive({
-  selector: 'textarea,input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url],input[type=tel],input[type=date],input[type=datetime],input[type=datetime-local],input[type=week],input[type=time]',
-  host: {
-    'class': 'text-input'
-  }
+  selector: '.text-input'
 })
-export class TextInput {
+export class NativeInput {
   private _relocated: boolean;
 
-  type: string;
-
-  @Input() ngModel;
-  @Input() value: string;
   @Output() focusChange: EventEmitter<boolean> = new EventEmitter();
   @Output() valueChange: EventEmitter<string> = new EventEmitter();
 
   constructor(
-    @Attribute('type') type: string,
     private _elementRef: ElementRef,
-    private _renderer: Renderer
-  ) {
-    this.type = type || 'text';
-  }
+    private _renderer: Renderer,
+    public ngControl: NgControl
+  ) {}
 
   /**
    * @private
    */
-  ngOnInit() {
-    if (this.ngModel) {
-      this.value = this.ngModel;
-    } else {
-      this.value = this._elementRef.nativeElement.value;
-    }
-  }
-
-  /**
-   * @private
-   */
-  @HostListener('keyup', ['$event'])
-  private _keyup(ev) {
+  @HostListener('input', ['$event'])
+  private _change(ev) {
     this.valueChange.emit(ev.target.value);
   }
 
@@ -80,26 +61,29 @@ export class TextInput {
   /**
    * @private
    */
-  relocate(shouldRelocate: boolean, inputRelativeY?) {
+  relocate(shouldRelocate: boolean, inputRelativeY: number) {
     if (this._relocated !== shouldRelocate) {
 
       let focusedInputEle = this.element();
       if (shouldRelocate) {
         let clonedInputEle = cloneInput(focusedInputEle, 'cloned-input');
 
-        focusedInputEle.classList.add('hide-focused-input');
-        focusedInputEle.style[CSS.transform] = `translate3d(-9999px,${inputRelativeY}px,0)`;
         focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
+        focusedInputEle.style[CSS.transform] = `translate3d(-9999px,${inputRelativeY}px,0)`;
+        focusedInputEle.style.opacity = '0';
 
         this.setFocus();
 
+        raf(() => {
+          focusedInputEle.style.display = 'none';
+        });
+
       } else {
-        focusedInputEle.classList.remove('hide-focused-input');
         focusedInputEle.style[CSS.transform] = '';
-        let clonedInputEle = focusedInputEle.parentElement.querySelector('.cloned-input');
-        if (clonedInputEle) {
-          clonedInputEle.parentNode.removeChild(clonedInputEle);
-        }
+        focusedInputEle.style.display = '';
+        focusedInputEle.style.opacity = '';
+
+        removeClone(focusedInputEle, 'cloned-input');
       }
 
       this._relocated = shouldRelocate;
@@ -115,17 +99,13 @@ export class TextInput {
     if (shouldHideFocus) {
       let clonedInputEle = cloneInput(focusedInputEle, 'cloned-hidden');
 
-      focusedInputEle.classList.add('hide-focused-input');
-      focusedInputEle.style[CSS.transform] = 'translate3d(-9999px,0,0)';
+      focusedInputEle.style.display = 'none';
       focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
 
     } else {
-      focusedInputEle.classList.remove('hide-focused-input');
-      focusedInputEle.style[CSS.transform] = '';
-      let clonedInputEle = focusedInputEle.parentElement.querySelector('.cloned-hidden');
-      if (clonedInputEle) {
-        clonedInputEle.parentNode.removeChild(clonedInputEle);
-      }
+      focusedInputEle.style.display = '';
+
+      removeClone(focusedInputEle, 'cloned-hidden');
     }
   }
 
@@ -133,17 +113,6 @@ export class TextInput {
     return hasFocus(this.element());
   }
 
-  /**
-   * @private
-   */
-  addClass(className: string) {
-    this._renderer.setElementClass(this._elementRef.nativeElement, className, true);
-  }
-
-  hasClass(className): boolean {
-    return this._elementRef.nativeElement.classList.contains(className);
-  }
-
   /**
    * @private
    */
@@ -153,12 +122,19 @@ export class TextInput {
 
 }
 
-function cloneInput(srcInput, addCssClass: string) {
-  let clonedInputEle = srcInput.cloneNode(true);
+function cloneInput(focusedInputEle, addCssClass) {
+  let clonedInputEle = focusedInputEle.cloneNode(true);
   clonedInputEle.classList.add(addCssClass);
-  clonedInputEle.classList.remove('hide-focused-input');
   clonedInputEle.setAttribute('aria-hidden', true);
   clonedInputEle.removeAttribute('aria-labelledby');
   clonedInputEle.tabIndex = -1;
+  clonedInputEle.style.width = (focusedInputEle.offsetWidth + 10) + 'px';
   return clonedInputEle;
 }
+
+function removeClone(focusedInputEle, queryCssClass) {
+  let clonedInputEle = focusedInputEle.parentElement.querySelector('.' + queryCssClass);
+  if (clonedInputEle) {
+    clonedInputEle.parentNode.removeChild(clonedInputEle);
+  }
+}
diff --git a/ionic/components/input/test/fixed-inline-labels/index.ts b/ionic/components/input/test/fixed-inline-labels/index.ts
index 43aed36502..64c0c5fba8 100644
--- a/ionic/components/input/test/fixed-inline-labels/index.ts
+++ b/ionic/components/input/test/fixed-inline-labels/index.ts
@@ -4,4 +4,10 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class E2EApp {}
+class E2EApp {
+  url;
+
+  constructor() {
+    this.url = 'hello';
+  }
+}
diff --git a/ionic/components/input/test/fixed-inline-labels/main.html b/ionic/components/input/test/fixed-inline-labels/main.html
index 2171e4e359..a30e7824dc 100644
--- a/ionic/components/input/test/fixed-inline-labels/main.html
+++ b/ionic/components/input/test/fixed-inline-labels/main.html
@@ -1,79 +1,82 @@
 
-<ion-toolbar><ion-title>Fixed Inline Label Text Input</ion-title></ion-toolbar>
-
+<ion-toolbar>
+  <ion-title>Fixed Inline Label Text Input</ion-title>
+</ion-toolbar>
 
 <ion-content>
 
   <ion-list>
 
-    <ion-input fixed-label>
-      <ion-label>To</ion-label>
-      <input value="Text 1" type="text">
-    </ion-input>
+    <ion-item>
+      <ion-label fixed>To</ion-label>
+      <ion-input [(ngModel)]="url" type="url"></ion-input>
+    </ion-item>
 
-    <ion-input fixed-label>
-      <ion-label>CC</ion-label>
-      <input value="Text 2" type="text">
-    </ion-input>
+    <ion-item>
+      <ion-label fixed>Comments</ion-label>
+      <ion-textarea value="Comment value"></ion-textarea>
+    </ion-item>
 
-    <ion-input fixed-label>
-      <ion-label>From</ion-label>
-      <input value="Text 3" type="text">
+    <ion-item>
+      <ion-label fixed>CC</ion-label>
+      <ion-input value="Text 2"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label fixed>From</ion-label>
+      <ion-input value="Text 3"></ion-input>
       <button clear item-right>
         <ion-icon name="power"></ion-icon>
       </button>
-    </ion-input>
+    </ion-item>
 
-    <ion-input fixed-label>
-      <ion-label>Comments</ion-label>
-      <textarea>Comment value</textarea>
-    </ion-input>
-
-    <ion-input fixed-label>
+    <ion-item>
       <ion-icon name="globe" item-left></ion-icon>
-      <ion-label>Website</ion-label>
-      <input value="http://ionic.io/" type="url">
-    </ion-input>
+      <ion-label fixed>Website</ion-label>
+      <ion-input value="http://ionic.io/" type="url"></ion-input>
+    </ion-item>
 
-    <ion-input fixed-label>
+    <ion-item>
       <ion-icon name="mail" item-left></ion-icon>
-      <ion-label>Email</ion-label>
-      <input value="email6@email.com" type="email">
-    </ion-input>
+      <ion-label fixed>Email</ion-label>
+      <ion-input value="email6@email.com" type="email"></ion-input>
+    </ion-item>
 
-    <ion-input fixed-label>
+    <ion-item>
       <ion-icon name="call" item-left></ion-icon>
-      <ion-label>Phone</ion-label>
-      <input value="867-5309" type="tel">
-    </ion-input>
+      <ion-label fixed>Phone</ion-label>
+      <ion-input value="867-5309" type="tel"></ion-input>
+    </ion-item>
 
-    <ion-input fixed-label>
+    <ion-item>
       <ion-icon name="contact" item-left></ion-icon>
-      <input placeholder="Placeholder Text" type="text">
-    </ion-input>
+      <ion-input placeholder="Placeholder Text"></ion-input>
+    </ion-item>
 
-    <ion-input fixed-label>
-      <ion-label>Score</ion-label>
-      <input value="10" type="number">
+    <ion-item>
+      <ion-label fixed>Score</ion-label>
+      <ion-input value="10" type="number"></ion-input>
       <button outline item-right>Update</button>
-    </ion-input>
+    </ion-item>
 
-    <ion-input fixed-label>
-      <ion-label>First Name</ion-label>
-      <input value="Buzz" type="text">
-    </ion-input>
+    <ion-item>
+      <ion-label fixed>First Name</ion-label>
+      <ion-input value="Buzz" type="text"></ion-input>
+    </ion-item>
 
-    <ion-input fixed-label>
-      <ion-label>Last Name</ion-label>
-      <input value="Lightyear" type="text">
-    </ion-input>
+    <ion-item>
+      <ion-label fixed>Last Name</ion-label>
+      <ion-input value="Lightyear" type="text"></ion-input>
+    </ion-item>
 
-    <ion-input fixed-label>
+    <ion-item>
       <ion-icon name="create" item-left></ion-icon>
-      <ion-label>Message</ion-label>
-      <textarea>To infinity and beyond</textarea>
-    </ion-input>
+      <ion-label fixed>Message</ion-label>
+      <ion-textarea value="To infinity and beyond"></ion-textarea>
+    </ion-item>
 
   </ion-list>
 
+  <p>{{url}}</p>
+
 </ion-content>
diff --git a/ionic/components/input/test/floating-labels/main.html b/ionic/components/input/test/floating-labels/main.html
index 93fe74fe49..edb1fc36de 100644
--- a/ionic/components/input/test/floating-labels/main.html
+++ b/ionic/components/input/test/floating-labels/main.html
@@ -6,57 +6,57 @@
 
   <ion-list inset>
 
-    <ion-input floating-label>
-      <ion-label>Floating Label 1</ion-label>
-      <input [(ngModel)]='myValues.value1' type="text">
-    </ion-input>
+    <ion-item>
+      <ion-label floating>Floating Label 1</ion-label>
+      <ion-input [(ngModel)]='myValues.value1'></ion-input>
+    </ion-item>
     Value: {{ myValues.value1 }}
 
-    <ion-input floating-label>
-      <ion-label>Floating Label 2</ion-label>
-      <input value="Has Value" type="text">
-    </ion-input>
+    <ion-item>
+      <ion-label floating>Floating Label 2</ion-label>
+      <ion-input value="Has Value"></ion-input>
+    </ion-item>
 
-    <ion-input floating-label>
-      <ion-label>Floating Label 3</ion-label>
-      <input type="number">
-    </ion-input>
+    <ion-item>
+      <ion-label floating>Floating Label 3</ion-label>
+      <ion-input type="number"></ion-input>
+    </ion-item>
 
-    <ion-input floating-label>
-      <ion-label primary>Floating Label 4</ion-label>
-      <textarea [(ngModel)]='myValues.value2'></textarea>
-    </ion-input>
+    <ion-item>
+      <ion-label floating primary>Floating Label 4</ion-label>
+      <ion-textarea [(ngModel)]='myValues.value2'></ion-textarea>
+    </ion-item>
     Value: {{ myValues.value2 }}
 
-    <ion-input floating-label>
-      <ion-label secondary>Floating Label 5</ion-label>
-      <input type="url">
-    </ion-input>
+    <ion-item>
+      <ion-label floating secondary>Floating Label 5</ion-label>
+      <ion-input type="url"></ion-input>
+    </ion-item>
 
-    <ion-input floating-label>
-      <ion-label danger>Floating Label 6</ion-label>
-      <input type="email">
-    </ion-input>
+    <ion-item>
+      <ion-label floating danger>Floating Label 6</ion-label>
+      <ion-input type="email"></ion-input>
+    </ion-item>
 
-    <ion-input floating-label>
-      <ion-label>Floating Label 7</ion-label>
-      <textarea></textarea>
-    </ion-input>
+    <ion-item>
+      <ion-label floating>Floating Label 7</ion-label>
+      <ion-textarea></ion-textarea>
+    </ion-item>
 
-    <ion-input floating-label>
-      <ion-label>Floating Label 8</ion-label>
-      <input type="text">
-    </ion-input>
+    <ion-item>
+      <ion-label floating>Floating Label 8</ion-label>
+      <ion-input></ion-input>
+    </ion-item>
 
-    <ion-input floating-label>
-      <ion-label>Floating Label 9</ion-label>
-      <input type="number">
-    </ion-input>
+    <ion-item>
+      <ion-label floating>Floating Label 9</ion-label>
+      <ion-input type="number"></ion-input>
+    </ion-item>
 
-    <ion-input floating-label>
-      <ion-label>Floating Label 10</ion-label>
-      <textarea></textarea>
-    </ion-input>
+    <ion-item>
+      <ion-label floating>Floating Label 10</ion-label>
+      <ion-textarea></ion-textarea>
+    </ion-item>
 
   </ion-list>
 
diff --git a/ionic/components/input/test/form-inputs/main.html b/ionic/components/input/test/form-inputs/main.html
index e045e73407..c010237b79 100644
--- a/ionic/components/input/test/form-inputs/main.html
+++ b/ionic/components/input/test/form-inputs/main.html
@@ -7,25 +7,25 @@
   <form [ngFormModel]="loginForm" #mf="ngForm" novalidate>
 
     <ion-list>
-      <ion-input floating-label clearInput>
-        <ion-label>Email</ion-label>
-        <input [(ngModel)]="login.email" ngControl="email" type="email" required>
-      </ion-input>
+      <ion-item clearInput>
+        <ion-label floating>Email</ion-label>
+        <ion-input [(ngModel)]="login.email" ngControl="email" type="email" required></ion-input>
+      </ion-item>
 
-      <ion-input floating-label clearInput>
-        <ion-label>Username</ion-label>
-        <input [(ngModel)]="login.username" ngControl="username" type="text">
-      </ion-input>
+      <ion-item clearInput>
+        <ion-label floating>Username</ion-label>
+        <ion-input [(ngModel)]="login.username" ngControl="username"></ion-input>
+      </ion-item>
 
-      <ion-input floating-label clearInput>
-        <ion-label>Password</ion-label>
-        <input [(ngModel)]="login.password" ngControl="password" type="password" required>
-      </ion-input>
+      <ion-item clearInput>
+        <ion-label floating>Password</ion-label>
+        <ion-input [(ngModel)]="login.password" ngControl="password" type="password" required></ion-input>
+      </ion-item>
 
-      <ion-input floating-label clearInput>
-        <ion-label>Comments</ion-label>
-        <textarea [(ngModel)]="login.comments" ngControl="comments" required>Comment value</textarea>
-      </ion-input>
+      <ion-item clearInput>
+        <ion-label floating>Comments</ion-label>
+        <ion-textarea [(ngModel)]="login.comments" ngControl="comments" required>Comment value</ion-textarea>
+      </ion-item>
 
       <div padding-left padding-right>
         <button block (click)="submit($event, login)">Login</button>
@@ -43,14 +43,14 @@
 
   <form (ngSubmit)="submit($event, user)" #lf="ngForm">
     <ion-list>
-      <ion-input floating-label clearInput>
-        <ion-label>Username</ion-label>
-        <input type="text" [(ngModel)]="user.username" ngControl="username" required>
-      </ion-input>
-      <ion-input floating-label clearInput>
-        <ion-label>Password</ion-label>
-        <input type="password" [(ngModel)]="user.password" ngControl="password" required>
-      </ion-input>
+      <ion-item clearInput>
+        <ion-label floating>Username</ion-label>
+        <ion-input [(ngModel)]="user.username" ngControl="username" required></ion-input>
+      </ion-item>
+      <ion-item clearInput>
+        <ion-label floating>Password</ion-label>
+        <ion-input type="password" [(ngModel)]="user.password" ngControl="password" required></ion-input>
+      </ion-item>
       <div padding-left padding-right clearInput>
         <button block type="submit">Login</button>
       </div>
@@ -64,25 +64,25 @@
   </form>
 
   <ion-list>
-    <ion-input clearInput>
+    <ion-item clearInput>
       <ion-label>Email</ion-label>
-      <input type="email" required>
-    </ion-input>
+      <ion-input type="email" required></ion-input>
+    </ion-item>
 
-    <ion-input clearInput>
+    <ion-item clearInput>
       <ion-label>Username</ion-label>
-      <input type="text">
-    </ion-input>
+      <ion-input></ion-input>
+    </ion-item>
 
-    <ion-input clearInput>
+    <ion-item clearInput>
       <ion-label>Password</ion-label>
-      <input type="password" required>
-    </ion-input>
+      <ion-input type="password" required></ion-input>
+    </ion-item>
 
-    <ion-input clearInput>
+    <ion-item clearInput>
       <ion-label>Comments</ion-label>
-      <textarea required>Comment value</textarea>
-    </ion-input>
+      <ion-textarea required>Comment value</ion-textarea>
+    </ion-item>
   </ion-list>
 
 </ion-content>
diff --git a/ionic/components/input/test/inline-labels/main.html b/ionic/components/input/test/inline-labels/main.html
index 4079e5bbf3..4023fac880 100644
--- a/ionic/components/input/test/inline-labels/main.html
+++ b/ionic/components/input/test/inline-labels/main.html
@@ -8,91 +8,91 @@
 
     <ion-list>
 
-      <ion-input>
+      <ion-item>
         <ion-label>To:</ion-label>
-        <input value="Text 1" type="text">
-      </ion-input>
+        <ion-input value="Text 1"></ion-input>
+      </ion-item>
 
-      <ion-input>
+      <ion-item>
         <ion-label>CC:</ion-label>
-        <input value="Text 2" type="text">
-      </ion-input>
+        <ion-input value="Text 2"></ion-input>
+      </ion-item>
 
-      <ion-input>
+      <ion-item>
         <ion-label>From:</ion-label>
-        <input value="Text 3" type="text">
+        <ion-input value="Text 3"></ion-input>
         <button clear item-right>
           <ion-icon name="power"></ion-icon>
         </button>
-      </ion-input>
+      </ion-item>
 
-      <ion-input>
+      <ion-item>
         <ion-label>Comments:</ion-label>
-        <textarea>Comment value</textarea>
-      </ion-input>
+        <ion-textarea value="Comment value"></ion-textarea>
+      </ion-item>
 
-      <ion-input>
+      <ion-item>
         <ion-icon name="globe" item-left></ion-icon>
         <ion-label>Website:</ion-label>
-        <input value="http://ionic.io/" type="url">
-      </ion-input>
+        <ion-input value="http://ionic.io/" type="url"></ion-input>
+      </ion-item>
 
-      <ion-input>
+      <ion-item>
         <ion-icon name="mail" item-left></ion-icon>
         <ion-label>Email:</ion-label>
-        <input value="email6@email.com" type="email">
-      </ion-input>
+        <ion-input value="email6@email.com" type="email"></ion-input>
+      </ion-item>
 
-      <ion-input>
+      <ion-item>
         <ion-icon name="create" item-left></ion-icon>
         <ion-label>Feedback:</ion-label>
-        <textarea placeholder="Placeholder Text"></textarea>
-      </ion-input>
+        <ion-textarea placeholder="Placeholder Text"></ion-textarea>
+      </ion-item>
 
-      <ion-input>
+      <ion-item>
         <ion-label>More Info:</ion-label>
-        <input placeholder="Placeholder Text" type="text">
+        <ion-input placeholder="Placeholder Text"></ion-input>
         <ion-icon name="flag" item-right></ion-icon>
-      </ion-input>
+      </ion-item>
 
-      <ion-input>
+      <ion-item>
         <ion-label>Score:</ion-label>
-        <input value="10" type="number">
+        <ion-input value="10" type="number"></ion-input>
         <button outline item-right>Update</button>
-      </ion-input>
+      </ion-item>
 
-      <ion-input>
+      <ion-item>
         <ion-label>First Name:</ion-label>
-        <input value="Lightning" type="text">
-      </ion-input>
+        <ion-input value="Lightning"></ion-input>
+      </ion-item>
 
-      <ion-input>
+      <ion-item>
         <ion-label>Last Name:</ion-label>
-        <input value="McQueen" type="text">
-      </ion-input>
+        <ion-input value="McQueen"></ion-input>
+      </ion-item>
 
-      <ion-input>
+      <ion-item>
         <ion-label>Message:</ion-label>
-        <textarea>KA-CHOW!</textarea>
-      </ion-input>
+        <ion-textarea value="KA-CHOW!"></ion-textarea>
+      </ion-item>
 
-      <ion-input>
+      <ion-item>
         <ion-label>Beginning:</ion-label>
-        <input value="2005-07-30" type="date">
-      </ion-input>
+        <ion-input value="2005-07-30" type="date"></ion-input>
+      </ion-item>
 
-      <ion-input>
+      <ion-item>
         <ion-label>Time:</ion-label>
-        <input value="12:00pm" type="time">
-      </ion-input>
+        <ion-input value="12:00pm" type="time"></ion-input>
+      </ion-item>
 
     </ion-list>
 
-    <ion-input>
+    <ion-item>
       <ion-label>No List</ion-label>
-      <input value="ListFreeeee" type="text">
-    </ion-input>
-    <textarea></textarea>
+      <ion-input value="ListFreeeee">
+    </ion-item>
+    <ion-textarea></ion-textarea>
 
   </form>
 
diff --git a/ionic/components/input/test/input-focus/main.html b/ionic/components/input/test/input-focus/main.html
index cc22868d22..18725bb961 100644
--- a/ionic/components/input/test/input-focus/main.html
+++ b/ionic/components/input/test/input-focus/main.html
@@ -15,90 +15,92 @@
 
   <ion-list>
 
-    <ion-input>
+    <ion-item>
       <ion-label>Text 1:</ion-label>
-      <input type="text">
-    </ion-input>
+      <ion-input></ion-input>
+    </ion-item>
 
     <ion-item>
       Item with button right
       <button item-right>Button 1</button>
     </ion-item>
 
-    <ion-input>
+    <ion-item>
       <ion-label id="my-label1">Text 2:</ion-label>
-      <input value="value" type="text">
-    </ion-input>
+      <ion-input value="value"></ion-input>
+    </ion-item>
 
     <button ion-item>
       Button Item
     </button>
 
-    <ion-input>
+    <ion-item>
       <ion-label>Text 3:</ion-label>
-      <input type="text">
+      <ion-input></ion-input>
       <button clear item-right>
         <ion-icon name="power"></ion-icon>
       </button>
-    </ion-input>
+    </ion-item>
 
-    <ion-input>
+    <ion-item>
       <ion-label>Comments:</ion-label>
-      <textarea>Comment value</textarea>
-    </ion-input>
+      <ion-textarea>Comment value</ion-textarea>
+    </ion-item>
 
-    <ion-input>
+    <ion-item>
       <ion-icon name="globe" item-left></ion-icon>
       <ion-label>Website:</ion-label>
-      <input value="http://ionic.io/" type="url">
-    </ion-input>
+      <ion-input value="http://ionic.io/" type="url"></ion-input>
+    </ion-item>
 
-    <ion-input>
+    <ion-item>
       <ion-icon name="mail" item-left></ion-icon>
       <ion-label>Email:</ion-label>
-      <input value="email6@email.com" type="email">
-    </ion-input>
+      <ion-input value="email6@email.com" type="email"></ion-input>
+    </ion-item>
 
-    <ion-input>
+    <ion-item>
       <ion-icon name="create" item-left></ion-icon>
       <ion-label>Feedback:</ion-label>
-      <textarea placeholder="Placeholder Text"></textarea>
-    </ion-input>
+      <ion-textarea placeholder="Placeholder Text"></ion-textarea>
+    </ion-item>
 
-    <ion-toggle>
-      Toggle
-    </ion-toggle>
+    <ion-item>
+      <ion-label>Toggle</ion-label>
+      <ion-toggle></ion-toggle>
+    </ion-item>
 
-    <ion-input>
+    <ion-item>
       <ion-label>More Info:</ion-label>
-      <input placeholder="Placeholder Text" type="text">
+      <ion-input placeholder="Placeholder Text"></ion-input>
       <ion-icon name="flag" item-right></ion-icon>
-    </ion-input>
+    </ion-item>
 
-    <ion-checkbox>
-      Checkbox
-    </ion-checkbox>
+    <ion-item>
+      <ion-label>Checkbox</ion-label>
+      <ion-checkbox></ion-checkbox>
+    </ion-item>
 
-    <ion-input>
+    <ion-item>
       <ion-label>Score:</ion-label>
-      <input value="10" type="number">
+      <ion-input value="10" type="number"></ion-input>
       <button outline item-right>Update</button>
-    </ion-input>
+    </ion-item>
 
-    <ion-input>
+    <ion-item>
       <ion-label>First Name:</ion-label>
-      <input value="Lightning" type="text">
-    </ion-input>
+      <ion-input value="Lightning"></ion-input>
+    </ion-item>
 
-    <ion-input>
+    <ion-item>
       <ion-label>Last Name:</ion-label>
-      <input value="McQueen" type="text">
-    </ion-input>
+      <ion-input value="McQueen"></ion-input>
+    </ion-item>
 
-    <ion-input>
+    <ion-item>
       <ion-label>Message:</ion-label>
-      <textarea>KA-CHOW!</textarea>
-    </ion-input>
+      <ion-textarea value="KA-CHOW!"></ion-textarea>
+    </ion-item>
 
     <ion-item>
       Item
@@ -116,13 +118,15 @@
       Radios
     </ion-list-header>
 
-    <ion-radio value="1">
-      Radio 1
-    </ion-radio>
+    <ion-item>
+      <ion-label>Radio 1</ion-label>
+      <ion-radio value="1"></ion-radio>
+    </ion-item>
 
-    <ion-radio value="2">
-      Radio 2
-    </ion-radio>
+    <ion-item>
+      <ion-label>Radio 2</ion-label>
+      <ion-radio value="2"></ion-radio>
+    </ion-item>
 
   </ion-list>
 
diff --git a/ionic/components/input/test/inset-inputs/main.html b/ionic/components/input/test/inset-inputs/main.html
index 49e8deb153..5519aa65b8 100644
--- a/ionic/components/input/test/inset-inputs/main.html
+++ b/ionic/components/input/test/inset-inputs/main.html
@@ -9,61 +9,61 @@
 
   <ion-list inset>
 
-    <ion-input>
+    <ion-item>
       <ion-icon name="search" item-left></ion-icon>
-      <input value="Input inside an inset list" type="text">
-    </ion-input>
+      <ion-input value="Input inside an inset list"></ion-input>
+    </ion-item>
 
-    <ion-input>
+    <ion-item>
       <ion-icon name="call" item-left></ion-icon>
-      <input type="tel">
-    </ion-input>
+      <ion-input type="tel"></ion-input>
+    </ion-item>
 
-    <ion-input>
+    <ion-item>
       <ion-icon name="mail" item-left></ion-icon>
-      <input placeholder="Placeholder text" type="text">
-    </ion-input>
+      <ion-input placeholder="Placeholder text"></ion-input>
+    </ion-item>
 
   </ion-list>
 
 
   <ion-list inset>
 
-    <ion-input inset>
+    <ion-item inset>
       <ion-icon name="search" item-left></ion-icon>
-      <input value="Inset input inside an inset list" type="text">
-    </ion-input>
+      <ion-input value="Inset input inside an inset list"></ion-input>
+    </ion-item>
 
-    <ion-input inset>
-      <input value="Inset input inside an inset list" type="text">
+    <ion-item inset>
+      <ion-input value="Inset input inside an inset list"></ion-input>
       <ion-icon name="mic" item-right></ion-icon>
-    </ion-input>
+    </ion-item>
 
   </ion-list>
 
 
   <ion-list>
 
-    <ion-input inset>
+    <ion-item inset>
       <ion-icon name="search" item-left></ion-icon>
-      <input value="Inset input inside a list" type="text">
+      <ion-input value="Inset input inside a list"></ion-input>
       <button outline item-right>Search</button>
-    </ion-input>
+    </ion-item>
 
   </ion-list>
 
 
   <ion-card>
 
-    <ion-input>
+    <ion-item>
       <ion-icon name="search" item-left></ion-icon>
-      <input value="Input inside a card" type="text">
-    </ion-input>
+      <ion-input value="Input inside a card"></ion-input>
+    </ion-item>
 
-    <ion-input>
-      <input value="Input inside a card" type="text">
+    <ion-item>
+      <ion-input value="Input inside a card"></ion-input>
       <ion-icon name="mic" item-right></ion-icon>
-    </ion-input>
+    </ion-item>
 
   </ion-card>
 
diff --git a/ionic/components/input/test/placeholder-labels/main.html b/ionic/components/input/test/placeholder-labels/main.html
index f2b63d61bc..4cd04dd75d 100644
--- a/ionic/components/input/test/placeholder-labels/main.html
+++ b/ionic/components/input/test/placeholder-labels/main.html
@@ -1,58 +1,60 @@
 
-<ion-toolbar><ion-title>Placeholder Label Text Input</ion-title></ion-toolbar>
+<ion-toolbar>
+  <ion-title>Placeholder Label Text Input</ion-title>
+</ion-toolbar>
 
 
 <ion-content class="outer-content">
 
   <ion-list>
 
-    <ion-input>
-      <input placeholder="Text Input Placeholder" type="text">
-    </ion-input>
+    <ion-item>
+      <ion-input placeholder="Text Input Placeholder"></ion-input>
+    </ion-item>
 
-    <ion-input>
-      <input placeholder="Text Input Placeholder" value="Text Input Value" type="text">
-    </ion-input>
+    <ion-item>
+      <ion-input placeholder="Text Input Placeholder" value="Text Input Value"></ion-input>
+    </ion-item>
 
-    <ion-input>
+    <ion-item>
       <ion-icon name="call" item-left></ion-icon>
-      <input placeholder="Text Input Placeholder" type="text">
-    </ion-input>
+      <ion-input placeholder="Text Input Placeholder"></ion-input>
+    </ion-item>
 
-    <ion-input>
+    <ion-item>
       <ion-icon name="call" item-left></ion-icon>
-      <input placeholder="Text Input Placeholder" value="Text Input Value" type="text">
-    </ion-input>
+      <ion-input placeholder="Text Input Placeholder" value="Text Input Value"></ion-input>
+    </ion-item>
 
-    <ion-input>
-      <textarea placeholder="Textarea Placeholder"></textarea>
-    </ion-input>
+    <ion-item>
+      <ion-textarea placeholder="ion-textarea Placeholder"></ion-textarea>
+    </ion-item>
 
-    <ion-input>
-      <textarea placeholder="Textarea Placeholder">Textarea value</textarea>
-    </ion-input>
+    <ion-item>
+      <ion-textarea placeholder="ion-textarea Placeholder">ion-textarea value</ion-textarea>
+    </ion-item>
 
   </ion-list>
 
   <ion-list inset>
 
-    <ion-input>
-      <input placeholder="Inset List: Text Input Placeholder" type="text">
-    </ion-input>
+    <ion-item>
+      <ion-input placeholder="Inset List: Text Input Placeholder"></ion-input>
+    </ion-item>
 
-    <ion-input>
-      <input placeholder="Inset List: Text Input Placeholder" value="Inset List: Text Input Value" type="text">
-    </ion-input>
+    <ion-item>
+      <ion-input placeholder="Inset List: Text Input Placeholder" value="Inset List: Text Input Value"></ion-input>
+    </ion-item>
 
-    <ion-input>
+    <ion-item>
       <ion-icon name="call" item-left></ion-icon>
-      <input placeholder="Inset List: Text Input Placeholder" type="text">
-    </ion-input>
+      <ion-input placeholder="Inset List: Text Input Placeholder"></ion-input>
+    </ion-item>
 
-    <ion-input>
+    <ion-item>
       <ion-icon name="call" item-left></ion-icon>
-      <input placeholder="Inset List: Text Input Placeholder" value="Inset List: Text Input Value" type="text">
-    </ion-input>
+      <ion-input placeholder="Inset List: Text Input Placeholder" value="Inset List: Text Input Value"></ion-input>
+    </ion-item>
 
   </ion-list>
 
diff --git a/ionic/components/input/test/stacked-labels/main.html b/ionic/components/input/test/stacked-labels/main.html
index 7a53d8acf7..29de0ba767 100644
--- a/ionic/components/input/test/stacked-labels/main.html
+++ b/ionic/components/input/test/stacked-labels/main.html
@@ -1,60 +1,62 @@
 
-<ion-toolbar><ion-title>Stacked Label Text Input</ion-title></ion-toolbar>
+<ion-toolbar>
+  <ion-title>Stacked Label Text Input</ion-title>
+</ion-toolbar>
 
 
 <ion-content>
 
   <ion-list>
 
-    <ion-input stacked-label>
-      <ion-label>Label 1</ion-label>
-      <input value="Text 1" type="text">
-    </ion-input>
+    <ion-item>
+      <ion-label stacked>Label 1</ion-label>
+      <ion-input value="Text 1"></ion-input>
+    </ion-item>
 
-    <ion-input stacked-label>
-      <ion-label>Label 2</ion-label>
-      <input value="Text 2" type="text">
-    </ion-input>
+    <ion-item>
+      <ion-label stacked>Label 2</ion-label>
+      <ion-input value="Text 2"></ion-input>
+    </ion-item>
 
-    <ion-input stacked-label>
-      <ion-label>Label 3</ion-label>
-      <input value="3" type="number">
-    </ion-input>
+    <ion-item>
+      <ion-label stacked>Label 3</ion-label>
+      <ion-input value="3" type="number"></ion-input>
+    </ion-item>
 
-    <ion-input stacked-label>
-      <ion-label>Label 4</ion-label>
-      <textarea>Textarea 4</textarea>
-    </ion-input>
+    <ion-item>
+      <ion-label stacked>Label 4</ion-label>
+      <ion-textarea value="ion-textarea 4"></ion-textarea>
+    </ion-item>
 
-    <ion-input stacked-label>
-      <ion-label>Label 5</ion-label>
-      <input value="http://url5.com/" type="url">
-    </ion-input>
+    <ion-item>
+      <ion-label stacked>Label 5</ion-label>
+      <ion-input value="http://url5.com/" type="url"></ion-input>
+    </ion-item>
 
-    <ion-input stacked-label>
-      <ion-label>Label 6</ion-label>
-      <input value="email6@email.com" type="email">
-    </ion-input>
+    <ion-item>
+      <ion-label stacked>Label 6</ion-label>
+      <ion-input value="email6@email.com" type="email"></ion-input>
+    </ion-item>
 
-    <ion-input stacked-label>
-      <ion-label>Label 7</ion-label>
-      <textarea>Textarea 7</textarea>
-    </ion-input>
+    <ion-item>
+      <ion-label stacked>Label 7</ion-label>
+      <ion-textarea value="ion-textarea 7"></ion-textarea>
+    </ion-item>
 
-    <ion-input stacked-label>
-      <ion-label>Label 8</ion-label>
-      <input value="Text 8" type="text">
-    </ion-input>
+    <ion-item>
+      <ion-label stacked>Label 8</ion-label>
+      <ion-input value="Text 8"></ion-input>
+    </ion-item>
 
-    <ion-input stacked-label>
-      <ion-label>Label 9</ion-label>
-      <input value="9" type="number">
-    </ion-input>
+    <ion-item>
+      <ion-label stacked>Label 9</ion-label>
+      <ion-input value="9" type="number"></ion-input>
+    </ion-item>
 
-    <ion-input stacked-label>
-      <ion-label>Label 10</ion-label>
-      <textarea>Textarea 10</textarea>
-    </ion-input>
+    <ion-item>
+      <ion-label stacked>Label 10</ion-label>
+      <ion-textarea value="ion-textarea 10"></ion-textarea>
+    </ion-item>
 
   </ion-list>
 
diff --git a/ionic/components/item/item-media.scss b/ionic/components/item/item-media.scss
index c8752c82b3..0fd7391c19 100644
--- a/ionic/components/item/item-media.scss
+++ b/ionic/components/item/item-media.scss
@@ -41,3 +41,13 @@ ion-thumbnail {
     display: block;
   }
 }
+
+.item-cover {
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
\ No newline at end of file
diff --git a/ionic/components/item/item-sliding.ts b/ionic/components/item/item-sliding.ts
index 63a6aac1a4..60b4f305a5 100644
--- a/ionic/components/item/item-sliding.ts
+++ b/ionic/components/item/item-sliding.ts
@@ -39,9 +39,9 @@ export class ItemSliding {
     elementRef.nativeElement.$ionSlide = ++slideIds;
   }
 
-/**
- * @private
- */
+  /**
+   * @private
+   */
   close() {
     this._list.closeSlidingItems();
   }
diff --git a/ionic/components/item/item.ios.scss b/ionic/components/item/item.ios.scss
index 0e5018a77c..ceec190ab7 100644
--- a/ionic/components/item/item.ios.scss
+++ b/ionic/components/item/item.ios.scss
@@ -23,6 +23,8 @@ $item-ios-sliding-content-bg:         $list-ios-background-color !default;
 // --------------------------------------------------
 
 .item {
+  position: relative;
+
   padding-left: $item-ios-padding-left;
   font-size: $item-ios-body-text-font-size;
   border-radius: 0;
@@ -83,10 +85,6 @@ $item-ios-sliding-content-bg:         $list-ios-background-color !default;
   border-bottom: 1px solid $list-ios-border-color;
 }
 
-ion-item-content {
-  margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
-}
-
 &.hairlines .item-inner {
   border-bottom-width: 0.55px;
 }
diff --git a/ionic/components/item/item.md.scss b/ionic/components/item/item.md.scss
index d005354eaa..3393e8642c 100644
--- a/ionic/components/item/item.md.scss
+++ b/ionic/components/item/item.md.scss
@@ -76,10 +76,6 @@ $item-md-sliding-content-bg:         $list-md-background-color !default;
   border-bottom: 1px solid $list-md-border-color;
 }
 
-ion-item-content {
-  margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0;
-}
-
 
 // Material Design Item Media
 // --------------------------------------------------
@@ -107,7 +103,7 @@ ion-icon[item-right] {
    padding: 0 1px;
  }
 
-[text-wrap] ion-item-content {
+[text-wrap] ion-label {
   font-size: $item-md-body-text-font-size;
   line-height: $item-md-body-text-line-height;
 }
diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index 6c7380a9f1..0ea7f6823e 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -60,7 +60,7 @@ ion-item-divider {
   }
 }
 
-ion-item-content {
+ion-label {
   margin: 0;
   flex: 1;
   white-space: nowrap;
@@ -68,7 +68,7 @@ ion-item-content {
   text-overflow: ellipsis;
 }
 
-[text-wrap] ion-item-content {
+[text-wrap] ion-label {
   white-space: normal;
 }
 
@@ -77,9 +77,5 @@ ion-input.item {
   align-items: flex-start;
 }
 
-ion-item-content + ion-item-content[cnt] {
-  display: none;
-}
-
 @import "item-media";
 @import "item-sliding";
diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts
index 70762502c8..c8ed66d545 100644
--- a/ionic/components/item/item.ts
+++ b/ionic/components/item/item.ts
@@ -1,7 +1,10 @@
-import {Component, ContentChildren} from 'angular2/core';
+import {Component, ContentChildren, forwardRef, ViewChild, ContentChild, Renderer, ElementRef} from 'angular2/core';
+import {NgIf} from 'angular2/common';
 
 import {Button} from '../button/button';
+import {Form} from '../../util/form';
 import {Icon} from '../icon/icon';
+import {Label} from '../label/label';
 
 
 /**
@@ -18,9 +21,6 @@ import {Icon} from '../icon/icon';
  * To hide this icon, add the `detail-none` attribute to the item (eg: `<button ion-item detail-none>`). To add the icon when it is not displayed by default,
  * add the `detail-push` attribute (eg: `<ion-item detail-push>`).
  *
- * To break an item up into multiple columns, add multiple `<ion-item-content>` components inside of the item. By default,
- * this component will automatically be added inside of an `<ion-item>`, giving it a single column.
- *
  *
  * @usage
  * ```html
@@ -32,13 +32,6 @@ import {Icon} from '../icon/icon';
  *     {{item.title}}
  *   </ion-item>
  *
- *   // multiple item-content containers
- *   <ion-item>
- *     <ion-item-content>First Column</ion-item-content>
- *     <ion-item-content>Second Column</ion-item-content>
- *     <ion-item-content>Third Column</ion-item-content>
- *   </ion-item>
- *
  * </ion-list>
  *
  *  ```
@@ -48,22 +41,92 @@ import {Icon} from '../icon/icon';
 @Component({
   selector: 'ion-item,[ion-item]',
   template:
-    '<ng-content select="[item-left]"></ng-content>' +
+    '<ng-content select="[item-left],ion-checkbox"></ng-content>' +
     '<div class="item-inner">' +
-      '<ng-content select="ion-item-content,[item-content]"></ng-content>' +
-      '<ion-item-content cnt>' +
+      '<ng-content select="ion-label"></ng-content>' +
+      '<ion-label *ngIf="_viewLabel">' +
         '<ng-content></ng-content>'+
-      '</ion-item-content>' +
-      '<ng-content select="[item-right]"></ng-content>' +
+      '</ion-label>' +
+      '<ng-content select="[item-right],ion-radio,ion-toggle,ion-select,ion-input,ion-textarea"></ng-content>' +
     '</div>',
   host: {
     'class': 'item'
-  }
+  },
+  directives: [NgIf, Label]
 })
 export class Item {
+  private _ids: number = -1;
+  private _inputs: Array<string> = [];
+  private _label: Label;
+  private _viewLabel: boolean = true;
 
+  id: string;
+  labelId: string = null;
+
+  constructor(form: Form, private _renderer: Renderer, private _elementRef: ElementRef) {
+    this.id = form.nextId().toString();
+  }
+
+  /**
+   * @private
+   */
+  registerInput(type: string) {
+    this._inputs.push(type);
+    return this.id + '-' + (++this._ids);
+  }
+
+  /**
+   * @private
+   */
+  ngAfterContentInit() {
+    if (this._viewLabel && this._inputs.length) {
+      let labelText = this.getLabelText().trim();
+      this._viewLabel = (labelText.length > 0);
+    }
+
+    if (this._inputs.length > 1) {
+      this.setCssClass('item-multiple-inputs', true);
+    }
+  }
+
+  /**
+   * @private
+   */
+  setCssClass(cssClass: string, shouldAdd: boolean) {
+    this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, shouldAdd);
+  }
+
+  /**
+   * @private
+   */
+  getLabelText(): string {
+    return this._label ? this._label.text : '';
+  }
+
+  @ContentChild(Label)
+  private set contentLabel(label: Label) {
+    if (label) {
+      this._label = label;
+      this.labelId = label.id = ('lbl-' + this.id);
+      if (label.type) {
+        this.setCssClass('item-label-' + label.type, true);
+      }
+      this._viewLabel = false;
+    }
+  }
+
+  @ViewChild(Label)
+  private set viewLabel(label: Label) {
+    if (!this._label) {
+      this._label = label;
+    }
+  }
+
+  /**
+   * @private
+   */
   @ContentChildren(Button)
-  set _buttons(buttons) {
+  private set _buttons(buttons) {
     buttons.toArray().forEach(button => {
       if (!button.isItem) {
         button.addClass('item-button');
@@ -71,10 +134,14 @@ export class Item {
     });
   }
 
+  /**
+   * @private
+   */
   @ContentChildren(Icon)
-  set _icons(icons) {
+  private set _icons(icons) {
     icons.toArray().forEach(icon => {
       icon.addClass('item-icon');
     });
   }
 }
+
diff --git a/ionic/components/item/test/dividers/main.html b/ionic/components/item/test/dividers/main.html
index 487ccfc9fa..b1a6e1f93b 100644
--- a/ionic/components/item/test/dividers/main.html
+++ b/ionic/components/item/test/dividers/main.html
@@ -61,15 +61,15 @@
     <ion-item-divider secondary>Secondary</ion-item-divider>
 
     <ion-item>
-      <ion-item-content>
+      <ion-label>
         Column 1
-      </ion-item-content>
-      <ion-item-content>
+      </ion-label>
+      <ion-label>
         Column 2
-      </ion-item-content>
-      <ion-item-content>
+      </ion-label>
+      <ion-label>
         Column 3
-      </ion-item-content>
+      </ion-label>
     </ion-item>
   </ion-item-group>
 
diff --git a/ionic/components/item/test/text/main.html b/ionic/components/item/test/text/main.html
index 743497bd21..2cccfb0b02 100644
--- a/ionic/components/item/test/text/main.html
+++ b/ionic/components/item/test/text/main.html
@@ -43,15 +43,9 @@
   </ion-item>
 
   <ion-item>
-    <ion-item-content>
-      Column 1
-    </ion-item-content>
-    <ion-item-content>
-      Column 2
-    </ion-item-content>
-    <ion-item-content>
-      Column 3
-    </ion-item-content>
+    <ion-label>
+      ion-label
+    </ion-label>
   </ion-item>
 
 </ion-content>
diff --git a/ionic/components/label/label.ios.scss b/ionic/components/label/label.ios.scss
index 4495c0c85a..b9b904c128 100644
--- a/ionic/components/label/label.ios.scss
+++ b/ionic/components/label/label.ios.scss
@@ -6,20 +6,28 @@
 
 $label-ios-text-color:         #7f7f7f !default;
 
-// Default Label
+
+// iOS Default Label
 // --------------------------------------------------
 
 ion-label {
   margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
+}
+
+
+// iOS Default Label Inside An Input Item
+// --------------------------------------------------
+
+.item-input ion-label {
   color: $label-ios-text-color;
 }
 
-ion-label + .item-input {
+.item-input ion-label + .item-input {
   margin-left: $item-ios-padding-left;
 }
 
 
-// Stacked & Floating Labels
+// iOS Stacked & Floating Labels
 // --------------------------------------------------
 
 .stacked-label {
@@ -34,13 +42,13 @@ ion-label + .item-input {
   transition: transform 150ms ease-in-out;
 }
 
-.input-focused .floating-label,
+.input-has-focus .floating-label,
 .input-has-value .floating-label {
   transform: translate3d(0, 0, 0) scale(0.8);
 }
 
-ion-label + .stacked-input,
-ion-label + .floating-input {
+.item-input ion-label + .stacked-input,
+.item-input ion-label + .floating-input {
   margin-left: 0;
 }
 
@@ -49,7 +57,9 @@ ion-label + .floating-input {
 // --------------------------------------------------
 
 @each $color-name, $color-value in $colors-ios {
+
   ion-label[#{$color-name}] {
     color: $color-value !important;
   }
+
 }
diff --git a/ionic/components/label/label.md.scss b/ionic/components/label/label.md.scss
index 79eb1e70ac..d98fae4d58 100644
--- a/ionic/components/label/label.md.scss
+++ b/ionic/components/label/label.md.scss
@@ -8,16 +8,24 @@ $label-md-text-color:                 #999 !default;
 $label-md-text-color-focused:         map-get($colors-md, primary) !default;
 
 
-// Default Label
+// Material Design Default Label
 // --------------------------------------------------
 
 ion-label {
   margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
+}
+
+
+// Material Design Default Label Inside An Input Item
+// --------------------------------------------------
+
+.item-input ion-label {
+  margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
   color: $label-md-text-color;
 }
 
 
-// Stacked & Floating Labela
+// Material Design Stacked & Floating Labela
 // --------------------------------------------------
 
 .stacked-label {
@@ -36,12 +44,12 @@ ion-label {
   margin-bottom: 0;
 }
 
-.input-focused .stacked-label,
-.input-focused .floating-label {
+.input-has-focus .stacked-label,
+.input-has-focus .floating-label {
   color: $label-md-text-color-focused;
 }
 
-.input-focused .floating-label,
+.input-has-focus .floating-label,
 .input-has-value .floating-label  {
   transform: translate3d(0, 0, 0) scale(0.8);
 }
@@ -51,7 +59,9 @@ ion-label {
 // --------------------------------------------------
 
 @each $color-name, $color-value in $colors-md {
+
   ion-label[#{$color-name}] {
     color: $color-value !important;
   }
+
 }
diff --git a/ionic/components/label/label.scss b/ionic/components/label/label.scss
index df13d1281e..2dee89d730 100644
--- a/ionic/components/label/label.scss
+++ b/ionic/components/label/label.scss
@@ -3,12 +3,19 @@
 // Label
 // --------------------------------------------------
 
-
 ion-label {
   display: block;
-  max-width: 200px;
   font-size: inherit;
   white-space: nowrap;
+}
+
+ion-label:empty {
+  display: none;
+}
+
+
+.item-input ion-label {
+  max-width: 200px;
   pointer-events: none;
 }
 
@@ -16,27 +23,27 @@ ion-label {
 // Stacked & Floating Inputs
 // --------------------------------------------------
 
-.fixed-label {
+ion-label[fixed] {
   width: 30%;
   min-width: 100px;
   max-width: 200px;
 }
 
-[stacked-label],
-[floating-label] {
+.item-label-stacked,
+.item-label-floating {
   flex-direction: column;
   align-items: flex-start;
 }
 
-.stacked-label,
-.floating-label {
+ion-label[stacked],
+ion-label[floating] {
   align-self: stretch;
   margin-bottom: 0;
   max-width: 100%;
 }
 
-.stacked-input,
-.floating-input {
+ion-label[stacked],
+ion-label[floating] {
   align-self: stretch;
   width: auto;
 }
diff --git a/ionic/components/label/label.ts b/ionic/components/label/label.ts
index 894e735e21..269b3e5ee4 100644
--- a/ionic/components/label/label.ts
+++ b/ionic/components/label/label.ts
@@ -1,18 +1,41 @@
-import {Directive, ElementRef, Renderer, Input} from 'angular2/core';
-
-import {Form} from '../../util/form';
+import {Directive, ElementRef, Renderer, Input, Optional, Attribute} from 'angular2/core';
 
 
 /**
  * @name Label
  * @description
- * Labels describe the data that the user should enter in to an input element.
+ * Labels describe the data that the user should enter in to an input
+ * element. You can give `ion-label` attributes to tell it how to
+ * handle its display type, which is especially useful for an
+ * `ion-item` which contains a text input.
+ *
+ * @property [fixed] - a persistant label that sits next the the input
+ * @property [floating] - a label that will float about the input if the input is empty of looses focus
+ * @property [stacked] - A stacked label will always appear on top of the input
+
+ *
  * @usage
  * ```html
- * <ion-input>
- *   <ion-label>Username</ion-label>
- *   <input type="text" value="">
- * </ion-input>
+ *  <ion-item>
+ *    <ion-label>Username</ion-label>
+ *    <ion-input></ion-input>
+ *  </ion-item>
+ *
+ *  <ion-item>
+ *    <ion-labe fixed>Website</ion-label>
+ *    <ion-input type="url"></ion-input>
+ *  </ion-item>
+ *
+ *  <ion-item>
+ *    <ion-label floating>Email</ion-label>
+ *    <ion-input type="email"></ion-input>
+ *  </ion-item>
+ *
+ *  <ion-item>
+ *    <ion-label stacked>Phone</ion-label>
+ *    <ion-input type="tel"></ion-input>
+ *  </ion-item>
+ *
  * ```
  *
  * @demo /docs/v2/demos/label/
@@ -22,31 +45,38 @@ import {Form} from '../../util/form';
  */
 
 @Directive({
-  selector: 'ion-label',
-  host: {
-    '[attr.id]': 'id'
-  }
+  selector: 'ion-label'
 })
 export class Label {
-  @Input() id: string;
+  private _id: string;
+
+  type: string;
 
   constructor(
-    private _form: Form,
     private _elementRef: ElementRef,
-    private _renderer: Renderer
-  ) {}
+    private _renderer: Renderer,
+    @Attribute('floating') isFloating: string,
+    @Attribute('stacked') isStacked: string,
+    @Attribute('fixed') isFixed: string,
+    @Attribute('inset') isInset: string
+  ) {
+    this.type = (isFloating === '' ? 'floating' : (isStacked === '' ? 'stacked' : (isFixed === '' ? 'fixed' : (isInset === '' ? 'inset' : null))));
+  }
 
-  /**
-   * @private
-   */
-  ngOnInit() {
-    if (!this.id) {
-      this.id = 'lbl-' + this._form.nextId();
+  @Input()
+  get id(): string {
+    return this._id;
+  }
+
+  set id(val: string) {
+    this._id = val;
+    if (val) {
+      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', val);
     }
   }
 
   get text(): string {
-    return this._elementRef.nativeElement.textContent;
+    return this._elementRef.nativeElement.textContent || '';
   }
 
   /**
diff --git a/ionic/components/list/list.md.scss b/ionic/components/list/list.md.scss
index 0c80629e94..3820ee78bb 100644
--- a/ionic/components/list/list.md.scss
+++ b/ionic/components/list/list.md.scss
@@ -50,7 +50,7 @@ ion-list {
     border-bottom: 1px solid $list-md-border-color;
 
     .item-inner,
-    ion-item-content {
+    ion-label {
       border-bottom: none;
     }
   }
diff --git a/ionic/components/option/option.ts b/ionic/components/option/option.ts
index bf3ce9295e..0b750ab986 100644
--- a/ionic/components/option/option.ts
+++ b/ionic/components/option/option.ts
@@ -1,5 +1,6 @@
 import {Directive, ElementRef, Input} from 'angular2/core';
 
+import {isDefined} from '../../util/util';
 
 /**
  * @name Option
@@ -9,12 +10,9 @@ import {Directive, ElementRef, Input} from 'angular2/core';
 })
 export class Option {
   private _checked: boolean = false;
+  private _value;
 
-  @Input() value: string;
-
-  constructor(private _elementRef: ElementRef) {
-    this._checked = false;
-  }
+  constructor(private _elementRef: ElementRef) {}
 
   @Input()
   get checked() {
@@ -25,6 +23,18 @@ export class Option {
     this._checked = (val === 'true' || val === true || val === '');
   }
 
+  @Input()
+  get value() {
+    if (isDefined(this._value)) {
+      return this._value;
+    }
+    return this.text;
+  }
+
+  set value(val) {
+    this._value = val;
+  }
+
   get text() {
     return this._elementRef.nativeElement.textContent;
   }
diff --git a/ionic/components/radio/radio-button.ts b/ionic/components/radio/radio-button.ts
new file mode 100644
index 0000000000..ff2a29246f
--- /dev/null
+++ b/ionic/components/radio/radio-button.ts
@@ -0,0 +1,140 @@
+import {Component, Optional, Input, Output, HostListener, EventEmitter} from 'angular2/core';
+
+import {Item} from '../item/item';
+import {ListHeader} from '../list/list';
+import {Form} from '../../util/form';
+import {isDefined} from '../../util/util';
+import {RadioGroup} from './radio-group';
+
+
+/**
+ * @description
+ * A radio button with a unique value. Note that all `<ion-radio>` components
+ * must be wrapped within a `<ion-list radio-group>`, and there must be at
+ * least two `<ion-radio>` components within the radio group.
+ *
+ * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
+ *
+ * @usage
+ * ```html
+ * <ion-radio value="my-value" checked="true">
+ *   Radio Label
+ * </ion-radio>
+ * ```
+ * @demo /docs/v2/demos/radio/
+ * @see {@link /docs/v2/components#radio Radio Component Docs}
+ */
+@Component({
+  selector: 'ion-radio',
+  template:
+    '<div class="radio-icon" [class.radio-checked]="_checked">' +
+      '<div class="radio-inner"></div>' +
+    '</div>' +
+    '<button role="radio" ' +
+            '[id]="id" ' +
+            '[attr.aria-checked]="_checked" ' +
+            '[attr.aria-labelledby]="_labelId" ' +
+            '[attr.aria-disabled]="_disabled" ' +
+            'class="item-cover">' +
+    '</button>',
+  host: {
+    '[class.radio-disabled]': '_disabled'
+  }
+})
+export class RadioButton {
+  private _checked: any = false;
+  private _disabled: any = false;
+  private _labelId: string;
+
+  id: string;
+
+  @Input() value: string = '';
+  @Output() select: EventEmitter<RadioButton> = new EventEmitter();
+
+  constructor(
+    private _form: Form,
+    @Optional() private _item: Item,
+    @Optional() private _group: RadioGroup
+  ) {
+    _form.register(this);
+
+    if (_item) {
+      this.id = 'rb-' + _item.registerInput('radio');
+      this._labelId = 'lbl-' + _item.id;
+    }
+
+    if (_group) {
+      _group.register(this);
+    }
+  }
+
+  toggle() {
+    this.checked = !this._checked;
+  }
+
+  @Input()
+  get checked() {
+    return this._checked;
+  }
+
+  set checked(val) {
+<<<<<<< HEAD
+    if (!this._disabled) {
+      this._checked = (val === true || val === 'true');
+      this.select.emit(this);
+      this._item && this._item.setCssClass('item-radio-checked', this._checked);
+    }
+=======
+    this._checked = (val === true || val === 'true');
+    this.select.emit(this);
+>>>>>>> 581c666... refactor(radio): place ion-radio insde of ion-item
+  }
+
+  @Input()
+  get disabled() {
+    return this._disabled;
+  }
+
+  set disabled(val) {
+    this._disabled = (val === true || val === 'true');
+<<<<<<< HEAD
+    this._item && this._item.setCssClass('item-radio-disabled', this._disabled);
+=======
+    this._item && this._item.setCssClass('radio-disabled', val);
+>>>>>>> 581c666... refactor(radio): place ion-radio insde of ion-item
+  }
+
+  /**
+   * @private
+   */
+  setChecked(val: boolean) {
+    this._checked = val;
+<<<<<<< HEAD
+    this._item && this._item.setCssClass('item-radio-checked', val);
+=======
+    this._item && this._item.setCssClass('radio-checked', val);
+>>>>>>> 581c666... refactor(radio): place ion-radio insde of ion-item
+  }
+
+  /**
+   * @private
+   */
+  @HostListener('click', ['$event'])
+  private _click(ev) {
+<<<<<<< HEAD
+    console.debug('radio, select', this.value);
+=======
+    console.debug('RadioButton, select', this.value);
+>>>>>>> 581c666... refactor(radio): place ion-radio insde of ion-item
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.toggle();
+  }
+
+  /**
+   * @private
+   */
+  ngOnDestroy() {
+    this._form.deregister(this);
+  }
+}
diff --git a/ionic/components/radio/radio-group.ts b/ionic/components/radio/radio-group.ts
new file mode 100644
index 0000000000..b739ae2577
--- /dev/null
+++ b/ionic/components/radio/radio-group.ts
@@ -0,0 +1,167 @@
+import {Directive, ElementRef, Renderer, Optional, Input, Output, ContentChild, EventEmitter} from 'angular2/core';
+import {NgControl} from 'angular2/common';
+
+import {RadioButton} from './radio-button';
+import {ListHeader} from '../list/list';
+import {isDefined} from '../../util/util';
+
+
+/**
+ * A radio group is a group of radio components, and its value comes
+ * fr0m the selected radio button's value. Selecting a radio button
+ * in the group unselects all others in the group.
+ *
+ * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
+ *
+ * @usage
+ * ```html
+ * <ion-list radio-group ngControl="autoManufacturers">
+ *
+ *   <ion-list-header>
+ *     Auto Manufacturers
+ *   </ion-list-header>
+ *
+ *   <ion-item>
+ *     <ion-label>Cord</ion-label>
+ *     <ion-radio value="cord"></ion-radio>
+ *   </ion-item>
+ *
+ *   <ion-item>
+ *     <ion-label>Duesenberg</ion-label>
+ *     <ion-radio value="duesenberg" checked="true"></ion-radio>
+ *   </ion-item>
+ *
+ *   <ion-item>
+ *     <ion-label>Hudson</ion-label>
+ *     <ion-radio value="hudson"></ion-radio>
+ *   </ion-item>
+ *
+ *   <ion-item>
+ *     <ion-label>Packard</ion-label>
+ *     <ion-radio value="packard"></ion-radio>
+ *   </ion-item>
+ *
+ *   <ion-item>
+ *     <ion-label>Studebaker</ion-label>
+ *     <ion-radio value="studebaker"></ion-radio>
+ *   </ion-item>
+ *
+ * </ion-list>
+ * ```
+ * @demo /docs/v2/demos/radio/
+ * @see {@link /docs/v2/components#radio Radio Component Docs}
+*/
+@Directive({
+  selector: '[radio-group]',
+  host: {
+    '[attr.aria-activedescendant]': 'activeId',
+    'role': 'radiogroup'
+  }
+})
+export class RadioGroup {
+  private _buttons: Array<RadioButton> = [];
+
+  id;
+  value;
+
+  @Output() change: EventEmitter<RadioGroup> = new EventEmitter();
+
+  constructor(
+    @Optional() ngControl: NgControl,
+    private _renderer: Renderer,
+    private _elementRef: ElementRef
+  ) {
+    this.id = ++radioGroupIds;
+
+    if (ngControl) {
+      ngControl.valueAccessor = this;
+    }
+  }
+
+  /**
+   * @private
+   * Angular2 Forms API method called by the model (Control) on change to update
+   * the checked value.
+   * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L34
+   */
+  writeValue(value) {
+    this.value = isDefined(value) ? value : '';
+    this._buttons.forEach(button => {
+      let isChecked = (button.value === this.value);
+      button.setChecked(isChecked);
+      if (isChecked) {
+        this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
+      }
+    });
+  }
+
+  register(button: RadioButton) {
+    this._buttons.push(button);
+
+    button.select.subscribe(() => {
+      this.writeValue(button.value);
+      this.onChange(button.value);
+      this.change.emit(this);
+    });
+  }
+
+  ngAfterContentInit() {
+    this._buttons.forEach(button => {
+
+      if (isDefined(this.value)) {
+        let isChecked = (button.value === this.value) || button.checked;
+        button.setChecked(isChecked);
+        if (isChecked) {
+          this.writeValue(button.value);
+          //this.onChange(button.value);
+          this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
+        }
+      }
+
+    });
+  }
+
+  @ContentChild(ListHeader)
+  private set _header(header) {
+    if (header) {
+      if (!header.id) {
+        header.id = 'rg-hdr-' + this.id;
+      }
+      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', header.id);
+    }
+  }
+
+  /**
+   * @private
+   */
+  onChange(val) {
+    // TODO: figure the whys and the becauses
+  }
+
+  /**
+   * @private
+   */
+  onTouched(val) {
+    // TODO: figure the whys and the becauses
+  }
+
+  /**
+   * @private
+   * Angular2 Forms API method called by the view (NgControl) to register the
+   * onChange event handler that updates the model (Control).
+   * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L27
+   * @param {Function} fn  the onChange event handler.
+   */
+  registerOnChange(fn) { this.onChange = fn; }
+
+  /**
+   * @private
+   * Angular2 Forms API method called by the the view (NgControl) to register
+   * the onTouched event handler that marks the model (Control) as touched.
+   * @param {Function} fn  onTouched event handler.
+   */
+  registerOnTouched(fn) { this.onTouched = fn; }
+
+}
+
+let radioGroupIds = -1;
diff --git a/ionic/components/radio/radio-group.ts~3d61141c0391dbefcc6565ad94ab918ba2fff603 b/ionic/components/radio/radio-group.ts~3d61141c0391dbefcc6565ad94ab918ba2fff603
new file mode 100644
index 0000000000..b739ae2577
--- /dev/null
+++ b/ionic/components/radio/radio-group.ts~3d61141c0391dbefcc6565ad94ab918ba2fff603
@@ -0,0 +1,167 @@
+import {Directive, ElementRef, Renderer, Optional, Input, Output, ContentChild, EventEmitter} from 'angular2/core';
+import {NgControl} from 'angular2/common';
+
+import {RadioButton} from './radio-button';
+import {ListHeader} from '../list/list';
+import {isDefined} from '../../util/util';
+
+
+/**
+ * A radio group is a group of radio components, and its value comes
+ * fr0m the selected radio button's value. Selecting a radio button
+ * in the group unselects all others in the group.
+ *
+ * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
+ *
+ * @usage
+ * ```html
+ * <ion-list radio-group ngControl="autoManufacturers">
+ *
+ *   <ion-list-header>
+ *     Auto Manufacturers
+ *   </ion-list-header>
+ *
+ *   <ion-item>
+ *     <ion-label>Cord</ion-label>
+ *     <ion-radio value="cord"></ion-radio>
+ *   </ion-item>
+ *
+ *   <ion-item>
+ *     <ion-label>Duesenberg</ion-label>
+ *     <ion-radio value="duesenberg" checked="true"></ion-radio>
+ *   </ion-item>
+ *
+ *   <ion-item>
+ *     <ion-label>Hudson</ion-label>
+ *     <ion-radio value="hudson"></ion-radio>
+ *   </ion-item>
+ *
+ *   <ion-item>
+ *     <ion-label>Packard</ion-label>
+ *     <ion-radio value="packard"></ion-radio>
+ *   </ion-item>
+ *
+ *   <ion-item>
+ *     <ion-label>Studebaker</ion-label>
+ *     <ion-radio value="studebaker"></ion-radio>
+ *   </ion-item>
+ *
+ * </ion-list>
+ * ```
+ * @demo /docs/v2/demos/radio/
+ * @see {@link /docs/v2/components#radio Radio Component Docs}
+*/
+@Directive({
+  selector: '[radio-group]',
+  host: {
+    '[attr.aria-activedescendant]': 'activeId',
+    'role': 'radiogroup'
+  }
+})
+export class RadioGroup {
+  private _buttons: Array<RadioButton> = [];
+
+  id;
+  value;
+
+  @Output() change: EventEmitter<RadioGroup> = new EventEmitter();
+
+  constructor(
+    @Optional() ngControl: NgControl,
+    private _renderer: Renderer,
+    private _elementRef: ElementRef
+  ) {
+    this.id = ++radioGroupIds;
+
+    if (ngControl) {
+      ngControl.valueAccessor = this;
+    }
+  }
+
+  /**
+   * @private
+   * Angular2 Forms API method called by the model (Control) on change to update
+   * the checked value.
+   * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L34
+   */
+  writeValue(value) {
+    this.value = isDefined(value) ? value : '';
+    this._buttons.forEach(button => {
+      let isChecked = (button.value === this.value);
+      button.setChecked(isChecked);
+      if (isChecked) {
+        this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
+      }
+    });
+  }
+
+  register(button: RadioButton) {
+    this._buttons.push(button);
+
+    button.select.subscribe(() => {
+      this.writeValue(button.value);
+      this.onChange(button.value);
+      this.change.emit(this);
+    });
+  }
+
+  ngAfterContentInit() {
+    this._buttons.forEach(button => {
+
+      if (isDefined(this.value)) {
+        let isChecked = (button.value === this.value) || button.checked;
+        button.setChecked(isChecked);
+        if (isChecked) {
+          this.writeValue(button.value);
+          //this.onChange(button.value);
+          this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
+        }
+      }
+
+    });
+  }
+
+  @ContentChild(ListHeader)
+  private set _header(header) {
+    if (header) {
+      if (!header.id) {
+        header.id = 'rg-hdr-' + this.id;
+      }
+      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', header.id);
+    }
+  }
+
+  /**
+   * @private
+   */
+  onChange(val) {
+    // TODO: figure the whys and the becauses
+  }
+
+  /**
+   * @private
+   */
+  onTouched(val) {
+    // TODO: figure the whys and the becauses
+  }
+
+  /**
+   * @private
+   * Angular2 Forms API method called by the view (NgControl) to register the
+   * onChange event handler that updates the model (Control).
+   * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L27
+   * @param {Function} fn  the onChange event handler.
+   */
+  registerOnChange(fn) { this.onChange = fn; }
+
+  /**
+   * @private
+   * Angular2 Forms API method called by the the view (NgControl) to register
+   * the onTouched event handler that marks the model (Control) as touched.
+   * @param {Function} fn  onTouched event handler.
+   */
+  registerOnTouched(fn) { this.onTouched = fn; }
+
+}
+
+let radioGroupIds = -1;
diff --git a/ionic/components/radio/radio-group.ts~HEAD b/ionic/components/radio/radio-group.ts~HEAD
new file mode 100644
index 0000000000..b739ae2577
--- /dev/null
+++ b/ionic/components/radio/radio-group.ts~HEAD
@@ -0,0 +1,167 @@
+import {Directive, ElementRef, Renderer, Optional, Input, Output, ContentChild, EventEmitter} from 'angular2/core';
+import {NgControl} from 'angular2/common';
+
+import {RadioButton} from './radio-button';
+import {ListHeader} from '../list/list';
+import {isDefined} from '../../util/util';
+
+
+/**
+ * A radio group is a group of radio components, and its value comes
+ * fr0m the selected radio button's value. Selecting a radio button
+ * in the group unselects all others in the group.
+ *
+ * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
+ *
+ * @usage
+ * ```html
+ * <ion-list radio-group ngControl="autoManufacturers">
+ *
+ *   <ion-list-header>
+ *     Auto Manufacturers
+ *   </ion-list-header>
+ *
+ *   <ion-item>
+ *     <ion-label>Cord</ion-label>
+ *     <ion-radio value="cord"></ion-radio>
+ *   </ion-item>
+ *
+ *   <ion-item>
+ *     <ion-label>Duesenberg</ion-label>
+ *     <ion-radio value="duesenberg" checked="true"></ion-radio>
+ *   </ion-item>
+ *
+ *   <ion-item>
+ *     <ion-label>Hudson</ion-label>
+ *     <ion-radio value="hudson"></ion-radio>
+ *   </ion-item>
+ *
+ *   <ion-item>
+ *     <ion-label>Packard</ion-label>
+ *     <ion-radio value="packard"></ion-radio>
+ *   </ion-item>
+ *
+ *   <ion-item>
+ *     <ion-label>Studebaker</ion-label>
+ *     <ion-radio value="studebaker"></ion-radio>
+ *   </ion-item>
+ *
+ * </ion-list>
+ * ```
+ * @demo /docs/v2/demos/radio/
+ * @see {@link /docs/v2/components#radio Radio Component Docs}
+*/
+@Directive({
+  selector: '[radio-group]',
+  host: {
+    '[attr.aria-activedescendant]': 'activeId',
+    'role': 'radiogroup'
+  }
+})
+export class RadioGroup {
+  private _buttons: Array<RadioButton> = [];
+
+  id;
+  value;
+
+  @Output() change: EventEmitter<RadioGroup> = new EventEmitter();
+
+  constructor(
+    @Optional() ngControl: NgControl,
+    private _renderer: Renderer,
+    private _elementRef: ElementRef
+  ) {
+    this.id = ++radioGroupIds;
+
+    if (ngControl) {
+      ngControl.valueAccessor = this;
+    }
+  }
+
+  /**
+   * @private
+   * Angular2 Forms API method called by the model (Control) on change to update
+   * the checked value.
+   * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L34
+   */
+  writeValue(value) {
+    this.value = isDefined(value) ? value : '';
+    this._buttons.forEach(button => {
+      let isChecked = (button.value === this.value);
+      button.setChecked(isChecked);
+      if (isChecked) {
+        this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
+      }
+    });
+  }
+
+  register(button: RadioButton) {
+    this._buttons.push(button);
+
+    button.select.subscribe(() => {
+      this.writeValue(button.value);
+      this.onChange(button.value);
+      this.change.emit(this);
+    });
+  }
+
+  ngAfterContentInit() {
+    this._buttons.forEach(button => {
+
+      if (isDefined(this.value)) {
+        let isChecked = (button.value === this.value) || button.checked;
+        button.setChecked(isChecked);
+        if (isChecked) {
+          this.writeValue(button.value);
+          //this.onChange(button.value);
+          this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
+        }
+      }
+
+    });
+  }
+
+  @ContentChild(ListHeader)
+  private set _header(header) {
+    if (header) {
+      if (!header.id) {
+        header.id = 'rg-hdr-' + this.id;
+      }
+      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', header.id);
+    }
+  }
+
+  /**
+   * @private
+   */
+  onChange(val) {
+    // TODO: figure the whys and the becauses
+  }
+
+  /**
+   * @private
+   */
+  onTouched(val) {
+    // TODO: figure the whys and the becauses
+  }
+
+  /**
+   * @private
+   * Angular2 Forms API method called by the view (NgControl) to register the
+   * onChange event handler that updates the model (Control).
+   * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L27
+   * @param {Function} fn  the onChange event handler.
+   */
+  registerOnChange(fn) { this.onChange = fn; }
+
+  /**
+   * @private
+   * Angular2 Forms API method called by the the view (NgControl) to register
+   * the onTouched event handler that marks the model (Control) as touched.
+   * @param {Function} fn  onTouched event handler.
+   */
+  registerOnTouched(fn) { this.onTouched = fn; }
+
+}
+
+let radioGroupIds = -1;
diff --git a/ionic/components/radio/radio.ios.scss b/ionic/components/radio/radio.ios.scss
index f33240863a..0629c97994 100644
--- a/ionic/components/radio/radio.ios.scss
+++ b/ionic/components/radio/radio.ios.scss
@@ -10,49 +10,11 @@ $radio-ios-icon-height:            21px !default;
 $radio-ios-icon-border-width:      2px !default;
 $radio-ios-icon-border-style:      solid !default;
 
-$radio-ios-disabled-text-color:    $subdued-text-ios-color !default;
 $radio-ios-disabled-opacity:       0.5 !default;
 
 
-ion-radio {
-  cursor: pointer;
-  @include user-select-none();
-
-  &[aria-checked=true] {
-    color: $radio-ios-color-on;
-  }
-
-  &[aria-checked=true] .radio-icon:after {
-    position: absolute;
-    border-width: $radio-ios-icon-border-width;
-    border-style: $radio-ios-icon-border-style;
-    border-color: $radio-ios-color-on;
-    top: 3px;
-    left: 7px;
-    width: 4px;
-    height: 10px;
-    border-left: none;
-    border-top: none;
-    content: '';
-    transform: rotate(45deg);
-  }
-
-  &.item.activated {
-    background-color: $list-ios-background-color;
-  }
-
-}
-
-ion-radio[aria-disabled=true] {
-  color: $radio-ios-disabled-text-color;
-  opacity: $radio-ios-disabled-opacity;
-  pointer-events: none;
-}
-
-.radio-media {
-  display: block;
-  margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2);
-}
+// iOS Radio Circle: Unchecked
+// -----------------------------------------
 
 .radio-icon {
   position: relative;
@@ -62,27 +24,69 @@ ion-radio[aria-disabled=true] {
 }
 
 
+// iOS Radio Checkmark: Checked
+// -----------------------------------------
+
+.radio-checked .radio-inner {
+  position: absolute;
+  border-width: $radio-ios-icon-border-width;
+  border-style: $radio-ios-icon-border-style;
+  border-color: $radio-ios-color-on;
+  top: 3px;
+  left: 7px;
+  width: 4px;
+  height: 10px;
+  border-left: none;
+  border-top: none;
+  transform: rotate(45deg);
+}
+
+
+// iOS Radio: Disabled
+// -----------------------------------------
+
+.radio-disabled,
+.item-radio-disabled ion-label {
+  opacity: $radio-ios-disabled-opacity;
+  pointer-events: none;
+}
+
+
+// iOS Radio Within An Item
+// -----------------------------------------
+
+.item ion-radio {
+  display: block;
+  margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2);
+}
+
+
+// iOS Radio Item Label: Checked
+// -----------------------------------------
+
+.item-radio-checked ion-label {
+  color: $radio-ios-color-on;
+}
+
+
 // iOS Radio Color Mixin
 // --------------------------------------------------
 
 @mixin radio-theme-ios($color-name, $color-value) {
 
-  ion-radio[#{$color-name}] {
+  ion-radio[#{$color-name}] .radio-checked {
+    color: $color-value;
 
-    &[aria-checked=true] .radio-icon:after {
+    .radio-inner {
       border-color: $color-value;
     }
 
-    &[aria-checked=true] {
-      color: $color-value;
-    }
-
   }
 
 }
 
 
-// Generate iOS Radio Auxiliary Colors
+// Generate iOS Radio Colors
 // --------------------------------------------------
 
 @each $color-name, $color-value in $colors-ios {
diff --git a/ionic/components/radio/radio.md.scss b/ionic/components/radio/radio.md.scss
index fb9f22ff86..2b2c876e87 100644
--- a/ionic/components/radio/radio.md.scss
+++ b/ionic/components/radio/radio.md.scss
@@ -15,33 +15,11 @@ $radio-md-icon-border-radius:     50% !default;
 $radio-md-transition-duration:    280ms !default;
 $radio-md-transition-easing:      cubic-bezier(.4, 0, .2, 1) !default;
 
-$radio-md-disabled-text-color:    $subdued-text-md-color !default;
 $radio-md-disabled-opacity:       0.5 !default;
 
 
-ion-radio {
-  cursor: pointer;
-  @include user-select-none();
-
-  &[aria-checked=true] {
-    color: $radio-md-color-on;
-  }
-
-  &[aria-checked=true] .radio-icon {
-    border-color: $radio-md-color-on;
-
-    &:after {
-      transform: scale3d(1, 1, 1);
-    }
-  }
-
-}
-
-ion-radio[aria-disabled=true] {
-  color: $radio-md-disabled-text-color;
-  opacity: $radio-md-disabled-opacity;
-  pointer-events: none;
-}
+// Material Design Radio Outer Circle: Unchecked
+// -----------------------------------------
 
 .radio-icon {
   position: relative;
@@ -55,44 +33,78 @@ ion-radio[aria-disabled=true] {
   border-style: $radio-md-icon-border-style;
   border-color: $radio-md-color-off;
   border-radius: $radio-md-icon-border-radius;
-
-  &:after {
-    position: absolute;
-    top: $radio-md-icon-border-width;
-    left: $radio-md-icon-border-width;
-    width: $radio-md-icon-width / 2;
-    height: $radio-md-icon-height / 2;
-    background-color: $radio-md-color-on;
-    border-radius: 50%;
-    content: '';
-    transition: transform $radio-md-transition-duration $radio-md-transition-easing;
-    transform: scale3d(0, 0, 0);
-  }
 }
 
-.radio-media {
+
+// Material Design Radio Inner Circle: Unchecked
+// -----------------------------------------
+
+.radio-inner  {
+  position: absolute;
+  top: $radio-md-icon-border-width;
+  left: $radio-md-icon-border-width;
+  width: $radio-md-icon-width / 2;
+  height: $radio-md-icon-height / 2;
+  background-color: $radio-md-color-on;
+  border-radius: 50%;
+  transition: transform $radio-md-transition-duration $radio-md-transition-easing;
+  transform: scale3d(0, 0, 0);
+}
+
+
+// Material Design Radio Outer Circle: Checked
+// -----------------------------------------
+
+.radio-checked {
+  border-color: $radio-md-color-on;
+}
+
+
+// Material Design Radio Inner Circle: Checked
+// -----------------------------------------
+
+.radio-checked .radio-inner {
+  transform: scale3d(1, 1, 1);
+}
+
+
+// Material Design Radio: Disabled
+// -----------------------------------------
+
+.radio-disabled,
+.item-radio-disabled ion-label {
+  opacity: $radio-md-disabled-opacity;
+  pointer-events: none;
+}
+
+
+// Material Design Radio Within An Item
+// -----------------------------------------
+
+.item ion-radio {
   display: block;
   margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom ($item-md-padding-left / 2);
 }
 
 
+// Material Design Radio Item Label: Checked
+// -----------------------------------------
+
+.item-radio-checked ion-label {
+  color: $radio-md-color-on;
+}
+
+
 // Material Design Radio Color Mixin
 // --------------------------------------------------
 
 @mixin radio-theme-md($color-name, $color-value) {
 
-  ion-radio[#{$color-name}] {
+  ion-radio[#{$color-name}] .radio-checked {
+    border-color: $color-value;
 
-    &[aria-checked=true] {
-      color: $color-value;
-    }
-
-    &[aria-checked=true] .radio-icon {
-      border-color: $color-value;
-
-      &:after {
-        background-color: $color-value;
-      }
+    .radio-icon {
+      background-color: $color-value;
     }
 
   }
diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts
deleted file mode 100644
index 24023bf53c..0000000000
--- a/ionic/components/radio/radio.ts
+++ /dev/null
@@ -1,261 +0,0 @@
-import {Component, Directive, ElementRef, Renderer, Optional, Input, Output, HostListener, ContentChildren, ContentChild, EventEmitter} from 'angular2/core';
-import {NgControl} from 'angular2/common';
-
-import {ListHeader} from '../list/list';
-import {Form} from '../../util/form';
-import {isDefined} from '../../util/util';
-
-
-/**
- * @description
- * A radio button with a unique value. Note that all `<ion-radio>` components
- * must be wrapped within a `<ion-list radio-group>`, and there must be at
- * least two `<ion-radio>` components within the radio group.
- *
- * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
- *
- * @usage
- * ```html
- * <ion-radio value="my-value" checked="true">
- *   Radio Label
- * </ion-radio>
- * ```
- * @demo /docs/v2/demos/radio/
- * @see {@link /docs/v2/components#radio Radio Component Docs}
- */
-@Component({
-  selector: 'ion-radio',
-  host: {
-    'role': 'radio',
-    'class': 'item',
-    'tappable': '',
-    'tabindex': '0',
-    '[attr.aria-disabled]': 'disabled'
-  },
-  template:
-    '<div class="item-inner">' +
-      '<ion-item-content id="{{labelId}}">' +
-        '<ng-content></ng-content>' +
-      '</ion-item-content>' +
-      '<div class="radio-media">' +
-        '<div class="radio-icon"></div>' +
-      '</div>' +
-    '</div>'
-})
-export class RadioButton {
-  labelId: any;
-
-  @Input() checked: any = false;
-  @Input() disabled: boolean = false;
-  @Input() id: string;
-  @Input() value: string = '';
-
-  @Output() select: EventEmitter<RadioButton> = new EventEmitter();
-
-  constructor(
-    private _form: Form,
-    private _renderer: Renderer,
-    private _elementRef: ElementRef
-  ) {
-    _form.register(this);
-  }
-
-  /**
-   * @private
-   */
-  ngOnInit() {
-    if (!this.id) {
-      this.id = 'rb-' + this._form.nextId();
-      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', this.id);
-    }
-    this.labelId = 'lbl-' + this.id;
-    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', this.labelId);
-
-    let checked = this.checked;
-    if (typeof checked === 'string') {
-      this.checked = (checked === '' || checked === 'true');
-    }
-    this.isChecked = this.checked;
-    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'checked', null);
-  }
-
-  /**
-   * @private
-   */
-  @HostListener('click')
-  private _click() {
-    console.debug('RadioButton, select', this.value);
-    this.select.emit(this);
-  }
-
-  public set isChecked(isChecked) {
-    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-checked', isChecked);
-  }
-
-  /**
-   * @private
-   */
-  ngOnDestroy() {
-    this._form.deregister(this);
-  }
-}
-
-
-/**
- * A radio group is a group of radio components.
- *
- * Selecting a radio button in the group unselects all others in the group.
- *
- * New radios can be registered dynamically.
- *
- * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
- *
- * @usage
- * ```html
- * <ion-list radio-group ngControl="autoManufacturers">
- *
- *   <ion-list-header>
- *     Auto Manufacturers
- *   </ion-list-header>
- *
- *   <ion-radio value="cord">
- *     Cord
- *   </ion-radio>
- *
- *   <ion-radio value="duesenberg" checked="true">
- *     Duesenberg
- *   </ion-radio>
- *
- *   <ion-radio value="hudson">
- *     Hudson
- *   </ion-radio>
- *
- *   <ion-radio value="packard">
- *     Packard
- *   </ion-radio>
- *
- *   <ion-radio value="studebaker">
- *     Studebaker
- *   </ion-radio>
- *
- *   <ion-radio value="tucker">
- *     Tucker
- *   </ion-radio>
- *
- * </ion-list>
- * ```
- * @demo /docs/v2/demos/radio/
- * @see {@link /docs/v2/components#radio Radio Component Docs}
-*/
-@Directive({
-  selector: '[radio-group]',
-  host: {
-    '[attr.aria-activedescendant]': 'activeId',
-    'role': 'radiogroup'
-  }
-})
-export class RadioGroup {
-  id;
-  value;
-
-  @Output() change: EventEmitter<RadioGroup> = new EventEmitter();
-  @ContentChildren(RadioButton) private _buttons;
-  @ContentChild(ListHeader) private _header;
-
-  constructor(
-    @Optional() ngControl: NgControl,
-    private _renderer: Renderer,
-    private _elementRef: ElementRef
-  ) {
-    this.id = ++radioGroupIds;
-
-    if (ngControl) {
-      ngControl.valueAccessor = this;
-    }
-  }
-
-  /**
-   * @private
-   * Angular2 Forms API method called by the model (Control) on change to update
-   * the checked value.
-   * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L34
-   */
-  writeValue(value) {
-    this.value = isDefined(value) ? value : '';
-    if (this._buttons) {
-      let buttons = this._buttons.toArray();
-      for (let button of buttons) {
-        let isChecked = (button.value === this.value);
-        button.isChecked = isChecked;
-        if (isChecked) {
-          this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
-        }
-      }
-    }
-  }
-
-  /**
-   * @private
-   */
-  onChange(val) {
-    // TODO: figure the whys and the becauses
-  }
-
-  /**
-   * @private
-   */
-  onTouched(val) {
-    // TODO: figure the whys and the becauses
-  }
-
-  /**
-   * @private
-   * Angular2 Forms API method called by the view (NgControl) to register the
-   * onChange event handler that updates the model (Control).
-   * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L27
-   * @param {Function} fn  the onChange event handler.
-   */
-  registerOnChange(fn) { this.onChange = fn; }
-
-  /**
-   * @private
-   * Angular2 Forms API method called by the the view (NgControl) to register
-   * the onTouched event handler that marks the model (Control) as touched.
-   * @param {Function} fn  onTouched event handler.
-   */
-  registerOnTouched(fn) { this.onTouched = fn; }
-
-  /**
-   * @private
-   */
-  ngAfterContentInit() {
-    let header = this._header;
-    if (header) {
-      if (!header.id) {
-        header.id = 'rg-hdr-' + this.id;
-      }
-      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', header.id);
-    }
-
-    this._buttons.toArray().forEach(button => {
-      button.select.subscribe(() => {
-        this.writeValue(button.value);
-        this.onChange(button.value);
-        this.change.emit(this);
-      });
-
-      if (isDefined(this.value)) {
-        let isChecked = (button.value === this.value) || button.checked;
-        button.isChecked = isChecked;
-        if (isChecked) {
-          this.writeValue(button.value);
-          //this.onChange(button.value);
-          this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
-        }
-      }
-    });
-  }
-
-}
-
-let radioGroupIds = -1;
diff --git a/ionic/components/radio/test/basic/e2e.ts b/ionic/components/radio/test/basic/e2e.ts
index 03b88753bd..dab19b790f 100644
--- a/ionic/components/radio/test/basic/e2e.ts
+++ b/ionic/components/radio/test/basic/e2e.ts
@@ -1,4 +1,4 @@
 
 it('should check Cherry', function() {
-  element(by.css('.e2eCherry')).click();
+  element(by.css('.e2eCherry button')).click();
 });
diff --git a/ionic/components/radio/test/basic/main.html b/ionic/components/radio/test/basic/main.html
index 66f7b69ea4..4654eb8661 100644
--- a/ionic/components/radio/test/basic/main.html
+++ b/ionic/components/radio/test/basic/main.html
@@ -12,21 +12,25 @@
         Fruits
       </ion-list-header>
 
-      <ion-radio value="apple" checked="true">
-        Apple
-      </ion-radio>
+      <ion-item>
+        <ion-label>Apple</ion-label>
+        <ion-radio value="apple" checked="true"></ion-radio>
+      </ion-item>
 
-      <ion-radio value="banana">
-        Banana
-      </ion-radio>
+      <ion-item>
+        <ion-label>Banana</ion-label>
+        <ion-radio value="banana"></ion-radio>
+      </ion-item>
 
-      <ion-radio value="cherry" secondary>
-        Cherry (secondary color)
-      </ion-radio>
+      <ion-item>
+        <ion-label>Cherry (secondary color)</ion-label>
+        <ion-radio value="cherry" secondary></ion-radio>
+      </ion-item>
 
-      <ion-radio value="disabled" disabled="true">
-        Disabled
-      </ion-radio>
+      <ion-item>
+        <ion-label>Disabled</ion-label>
+        <ion-radio value="disabled" disabled="true"></ion-radio>
+      </ion-item>
 
     </ion-list>
 
@@ -48,7 +52,10 @@
       <ion-list-header id="currencies">
         Currencies
       </ion-list-header>
-      <ion-radio *ngFor="#currency of currencies" [checked]="currency==selectedCurrency" [value]="currency">{{currency}}</ion-radio>
+      <ion-item *ngFor="#currency of currencies">
+        <ion-label>{{currency}}</ion-label>
+        <ion-radio [checked]="currency==selectedCurrency" [value]="currency"></ion-radio>
+      </ion-item>
     </ion-list>
   </form>
 
@@ -57,8 +64,14 @@
   </div>
 
   <ion-list radio-group [(ngModel)]="relationship">
-    <ion-radio value="friends">Friends</ion-radio>
-    <ion-radio value="enemies">Enemies</ion-radio>
+    <ion-item>
+      <ion-label>Friends</ion-label>
+      <ion-radio value="friends"></ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-label>Enemies</ion-label>
+      <ion-radio value="enemies"></ion-radio>
+    </ion-item>
   </ion-list>
 
   <div padding>
@@ -66,9 +79,18 @@
   </div>
 
   <ion-list radio-group [(ngModel)]="pet">
-    <ion-radio value="dogs" checked>Dogs</ion-radio>
-    <ion-radio value="cats">Cats</ion-radio>
-    <ion-radio value="turtles">Turtles</ion-radio>
+    <ion-item>
+      <ion-label>Dogs</ion-label>
+      <ion-radio value="dogs" checked></ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-label>Cats</ion-label>
+      <ion-radio value="cats"></ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-label>Turtles</ion-label>
+      <ion-radio value="turtles"></ion-radio>
+    </ion-item>
   </ion-list>
 
   <div padding>
diff --git a/ionic/components/select/select.ios.scss b/ionic/components/select/select.ios.scss
index 5949a0fa6c..e77bdd8b26 100644
--- a/ionic/components/select/select.ios.scss
+++ b/ionic/components/select/select.ios.scss
@@ -3,3 +3,13 @@
 
 // iOS Select
 // --------------------------------------------------
+
+$select-ios-padding-top:         $item-ios-padding-top !default;
+$select-ios-padding-right:       ($item-ios-padding-right / 2) !default;
+$select-ios-padding-bottom:      $item-ios-padding-bottom !default;
+$select-ios-padding-left:        $item-ios-padding-left !default;
+
+
+ion-select {
+  padding: $select-ios-padding-top $select-ios-padding-right  $select-ios-padding-bottom $select-ios-padding-left;
+}
\ No newline at end of file
diff --git a/ionic/components/select/select.md.scss b/ionic/components/select/select.md.scss
index 4f7daf746d..ce790331cd 100644
--- a/ionic/components/select/select.md.scss
+++ b/ionic/components/select/select.md.scss
@@ -3,3 +3,13 @@
 
 // Material Design Select
 // --------------------------------------------------
+
+$select-md-padding-top:         $item-md-padding-top !default;
+$select-md-padding-right:       ($item-md-padding-right / 2) !default;
+$select-md-padding-bottom:      $item-md-padding-bottom !default;
+$select-md-padding-left:        $item-md-padding-left !default;
+
+
+ion-select {
+  padding: $select-md-padding-top $select-md-padding-right $select-md-padding-bottom $select-md-padding-left;
+}
\ No newline at end of file
diff --git a/ionic/components/select/select.scss b/ionic/components/select/select.scss
index 6a79b0a6fd..f478e5eb54 100644
--- a/ionic/components/select/select.scss
+++ b/ionic/components/select/select.scss
@@ -3,33 +3,41 @@
 // Select
 // --------------------------------------------------
 
-.select-icon {
-  position: relative;
-  min-width: 16px;
+ion-select {
+  display: flex;
+  overflow: hidden;
 }
 
-.select-icon:after {
+.select-text {
+  flex: 1;
+  min-width: 16px;
+  max-width: 120px;
+  font-size: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.select-icon {
+  position: relative;
+  width: 16px;
+  height: 16px;
+}
+
+.select-icon .select-icon-inner {
   position: absolute;
   top: 50%;
-  left: 50%;
-  margin-top: -3px;
+  left: 5px;
+  margin-top: -2px;
   width: 0;
   height: 0;
   border-top: 5px solid;
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
   color: #999;
-  content: "";
   pointer-events: none;
 }
 
-.select-text-value {
-  max-width: 120px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-ion-select ion-label {
-  margin: 0;
-}
+.item-multiple-inputs ion-select {
+  position: relative;
+}
\ No newline at end of file
diff --git a/ionic/components/select/select.ts b/ionic/components/select/select.ts
index e43fba9005..cd2743de86 100644
--- a/ionic/components/select/select.ts
+++ b/ionic/components/select/select.ts
@@ -1,9 +1,9 @@
-import {Component, Directive, Optional, ElementRef, Input, Renderer, HostListener, ContentChild, ContentChildren, QueryList} from 'angular2/core';
+import {Component, Optional, ElementRef, Renderer, Input, HostListener, ContentChildren, QueryList} from 'angular2/core';
 import {NgControl} from 'angular2/common';
 
 import {Alert} from '../alert/alert';
 import {Form} from '../../util/form';
-import {Label} from '../label/label';
+import {Item} from '../item/item';
 import {merge} from '../../util/util';
 import {NavController} from '../nav/nav-controller';
 import {Option} from '../option/option';
@@ -19,9 +19,9 @@ import {Option} from '../option/option';
  *
  * Under-the-hood the `ion-select` actually uses the
  * {@link ../../alert/Alert Alert API} to open up the overlay of options
- * which the user is presented with. Select takes one child `ion-label`
- * component, and numerous child `ion-option` components. Each `ion-option`
- * should be given a `value` attribute.
+ * 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
  *
@@ -31,11 +31,13 @@ import {Option} from '../option/option';
  * receives the value of the selected option's value.
  *
  * ```html
- * <ion-select [(ngModel)]="gender">
+ * <ion-item>
  *   <ion-label>Gender</ion-label>
- *   <ion-option value="f" checked="true">Female</ion-option>
- *   <ion-option value="m">Male</ion-option>
- * </ion-select>
+ *   <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
@@ -44,18 +46,21 @@ import {Option} from '../option/option';
  * 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.
+ * 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.
  *
  * ```html
- * <ion-select [(ngModel)]="toppings" multiple="true">
+ * <ion-item>
  *   <ion-label>Toppings</ion-label>
- *   <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="mushrooms">Mushrooms</ion-option>
- *   <ion-option value="pepperoni">Pepperoni</ion-option>
- *   <ion-option value="sausage">Sausage</ion-option>
- * </ion-select>
+ *   <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
@@ -91,25 +96,25 @@ import {Option} from '../option/option';
  */
 @Component({
   selector: 'ion-select',
-  host: {
-    'class': 'item',
-    'tappable': '',
-    'tabindex': '0',
-    '[attr.aria-disabled]': 'disabled'
-  },
   template:
-    '<ng-content select="[item-left]"></ng-content>' +
-    '<div class="item-inner">' +
-      '<ion-item-content id="{{labelId}}">' +
-        '<ng-content select="ion-label"></ng-content>' +
-      '</ion-item-content>' +
-      '<div class="select-text-value" item-right>{{selectedText}}</div>' +
-      '<div class="select-icon" item-right></div>' +
-    '</div>'
+    '<div class="select-text">{{_selectedText}}</div>' +
+    '<div class="select-icon">' +
+      '<div class="select-icon-inner"></div>' +
+    '</div>' +
+    '<button [id]="id" ' +
+            '[attr.aria-disabled]="_disabled" ' +
+            'class="item-cover">' +
+    '</button>',
+  host: {
+    '[class.select-disabled]': '_disabled'
+  }
 })
 export class Select {
-  private selectedText: string = '';
-  private labelId: string;
+  private _selectedText: string = '';
+  private _disabled: any = false;
+  private _labelId: string;
+
+  id: string;
 
   @Input() cancelText: string = 'Cancel';
   @Input() okText: string = 'OK';
@@ -117,43 +122,34 @@ export class Select {
   @Input() alertOptions: any = {};
   @Input() checked: any = false;
   @Input() disabled: boolean = false;
-  @Input() id: string = '';
   @Input() multiple: string = '';
 
-  @ContentChild(Label) label: Label;
   @ContentChildren(Option) options: QueryList<Option>;
 
   constructor(
-    private form: Form,
-    private elementRef: ElementRef,
-    private renderer: Renderer,
-    @Optional() private navCtrl: NavController,
+    private _form: Form,
+    private _elementRef: ElementRef,
+    private _renderer: Renderer,
+    @Optional() private _item: Item,
+    @Optional() private _nav: NavController,
     @Optional() ngControl: NgControl
   ) {
-    this.form.register(this);
+    this._form.register(this);
 
     if (ngControl) {
       ngControl.valueAccessor = this;
     }
 
-    if (!navCtrl) {
+    if (_item) {
+      this.id = 'sel-' + _item.registerInput('select');
+      this._labelId = 'lbl-' + _item.id;
+    }
+
+    if (!_nav) {
       console.error('parent <ion-nav> required for <ion-select>');
     }
   }
 
-  /**
-   * @private
-   */
-  ngOnInit() {
-    if (!this.id) {
-      this.id = 'sel-' + this.form.nextId();
-      this.renderer.setElementAttribute(this.elementRef.nativeElement, 'id', this.id);
-    }
-
-    this.labelId = 'lbl-' + this.id;
-    this.renderer.setElementAttribute(this.elementRef.nativeElement, 'aria-labelledby', this.labelId);
-  }
-
   /**
    * @private
    */
@@ -167,9 +163,11 @@ export class Select {
           selectedOption = o;
         }
       });
+
     } else {
       this.value = selectedOption.value;
-      this.selectedText = selectedOption.text;
+      this._selectedText = selectedOption.text;
+
       setTimeout(()=> {
         this.onChange(this.value);
       });
@@ -179,8 +177,12 @@ export class Select {
   /**
    * @private
    */
-  @HostListener('click')
-  _click() {
+  @HostListener('click', ['$event'])
+  private _click(ev) {
+    console.debug('select, open alert');
+    ev.preventDefault();
+    ev.stopPropagation();
+
     let isMulti = this.multiple === 'true';
 
     // the user may have assigned some options specifically for the alert
@@ -191,8 +193,8 @@ export class Select {
     alertOptions.buttons = [this.cancelText];
 
     // if the alertOptions didn't provide an title then use the label's text
-    if (!alertOptions.title) {
-      alertOptions.title = this.label.text;
+    if (!alertOptions.title && this._item) {
+      alertOptions.title = this._item.getLabelText();
     }
 
     // user cannot provide inputs from alertOptions
@@ -234,7 +236,7 @@ export class Select {
             }
           });
 
-          this.selectedText = selectedTexts.join(', ');
+          this._selectedText = selectedTexts.join(', ');
 
           this.onChange(selectedValues);
         }
@@ -251,12 +253,12 @@ export class Select {
           // or undefined if nothing was checked
           this.value = selectedValue;
 
-          this.selectedText = '';
+          this._selectedText = '';
           this.options.toArray().forEach(option => {
             if (option.value === selectedValue) {
               // this option was the one that was checked
               option.checked = true;
-              this.selectedText = option.text;
+              this._selectedText = option.text;
 
             } else {
               // this option was not checked
@@ -269,7 +271,7 @@ export class Select {
       });
     }
 
-    this.navCtrl.present(alert);
+    this._nav.present(alert, alertOptions);
   }
 
   /**
@@ -317,6 +319,6 @@ export class Select {
    * @private
    */
   ngOnDestroy() {
-    this.form.deregister(this);
+    this._form.deregister(this);
   }
 }
diff --git a/ionic/components/select/test/multiple-value/main.html b/ionic/components/select/test/multiple-value/main.html
index bf91cc714a..6a3ca4799b 100644
--- a/ionic/components/select/test/multiple-value/main.html
+++ b/ionic/components/select/test/multiple-value/main.html
@@ -1,30 +1,36 @@
-<ion-toolbar><ion-title>Select Item: Multiple Value</ion-title></ion-toolbar>
+<ion-toolbar>
+  <ion-title>Select Item: Multiple Value</ion-title>
+</ion-toolbar>
 
 <ion-content class="outer-content">
 
-  <ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!">
+  <ion-item>
     <ion-label>Toppings</ion-label>
-    <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-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="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-select [(ngModel)]="carOptions" multiple="true">
+  <ion-item>
     <ion-label>Car Options</ion-label>
-    <ion-option value="backupcamera">Backup Camera</ion-option>
-    <ion-option value="heatedseats">Headted Seats</ion-option>
-    <ion-option value="keyless">Keyless Entry</ion-option>
-    <ion-option value="navigation">Navigation</ion-option>
-    <ion-option value="parkingassist">Parking Assist</ion-option>
-    <ion-option value="sunroof">Sun Roof</ion-option>
-  </ion-select>
+    <ion-select [(ngModel)]="carOptions" multiple="true">
+      <ion-option value="backupcamera">Backup Camera</ion-option>
+      <ion-option value="heatedseats">Headted Seats</ion-option>
+      <ion-option value="keyless">Keyless Entry</ion-option>
+      <ion-option value="navigation">Navigation</ion-option>
+      <ion-option value="parkingassist">Parking Assist</ion-option>
+      <ion-option value="sunroof">Sun Roof</ion-option>
+    </ion-select>
+  </ion-item>
 
   <p aria-hidden="true" padding>
     <code>toppings: {{toppings}}</code><br>
diff --git a/ionic/components/select/test/single-value/main.html b/ionic/components/select/test/single-value/main.html
index ec8b97d789..20a61c3425 100644
--- a/ionic/components/select/test/single-value/main.html
+++ b/ionic/components/select/test/single-value/main.html
@@ -2,45 +2,84 @@
 
 <ion-content class="outer-content">
 
-  <ion-select [(ngModel)]="gender">
+  <ion-item>
     <ion-label>Gender</ion-label>
-    <ion-option value="f" checked="true">Female</ion-option>
-    <ion-option value="m">Male</ion-option>
-  </ion-select>
+    <ion-select [(ngModel)]="gender">
+      <ion-option value="f" checked="true">Female</ion-option>
+      <ion-option value="m">Male</ion-option>
+    </ion-select>
+  </ion-item>
 
-  <ion-select [(ngModel)]="gaming">
+  <ion-item>
     <ion-label>Gaming</ion-label>
-    <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-select [(ngModel)]="gaming">
+      <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-select [(ngModel)]="os" submitText="Okay" cancelText="Nah">
+  <ion-item>
     <ion-label>Operating System</ion-label>
-    <ion-option value="dos">DOS</ion-option>
-    <ion-option value="lunix">Linux</ion-option>
-    <ion-option value="mac7">Mac OS 7</ion-option>
-    <ion-option value="mac8">Mac OS 8</ion-option>
-    <ion-option value="win3.1" checked>Windows 3.1</ion-option>
-    <ion-option value="win95">Windows 95</ion-option>
-    <ion-option value="win98">Windows 98</ion-option>
-  </ion-select>
+    <ion-select [(ngModel)]="os" submitText="Okay" cancelText="Nah">
+      <ion-option value="dos">DOS</ion-option>
+      <ion-option value="lunix">Linux</ion-option>
+      <ion-option value="mac7">Mac OS 7</ion-option>
+      <ion-option value="mac8">Mac OS 8</ion-option>
+      <ion-option value="win3.1" checked>Windows 3.1</ion-option>
+      <ion-option value="win95">Windows 95</ion-option>
+      <ion-option value="win98">Windows 98</ion-option>
+    </ion-select>
+  </ion-item>
 
-  <ion-select [(ngModel)]="music" [alertOptions]="musicAlertOpts">
+  <ion-item>
     <ion-label>Music</ion-label>
-    <ion-option value="aliceinchains">Alice in Chains</ion-option>
-    <ion-option value="greenday">Green Day</ion-option>
-    <ion-option value="hole">Hole</ion-option>
-    <ion-option value="korn">Korn</ion-option>
-    <ion-option value="nirvana">Nirvana</ion-option>
-    <ion-option value="pearljam">Pearl Jam</ion-option>
-    <ion-option value="smashingpumpkins">Smashing Pumpkins</ion-option>
-    <ion-option value="soundgarden">Soundgarden</ion-option>
-    <ion-option value="stp">Stone Temple Pilots</ion-option>
-  </ion-select>
+    <ion-select [(ngModel)]="music" [alertOptions]="musicAlertOpts">
+      <ion-option value="aliceinchains">Alice in Chains</ion-option>
+      <ion-option value="greenday">Green Day</ion-option>
+      <ion-option value="hole">Hole</ion-option>
+      <ion-option value="korn">Korn</ion-option>
+      <ion-option value="nirvana">Nirvana</ion-option>
+      <ion-option value="pearljam">Pearl Jam</ion-option>
+      <ion-option value="smashingpumpkins">Smashing Pumpkins</ion-option>
+      <ion-option value="soundgarden">Soundgarden</ion-option>
+      <ion-option value="stp">Stone Temple Pilots</ion-option>
+    </ion-select>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Date</ion-label>
+    <ion-select [(ngModel)]="month">
+      <ion-option value="01">January</ion-option>
+      <ion-option value="02">February</ion-option>
+      <ion-option value="03">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" checked="true">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 [(ngModel)]="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 checked="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>
 
   <p aria-hidden="true" padding>
     <code>gender: {{gender}}</code><br>
diff --git a/ionic/components/toggle/test/basic/main.html b/ionic/components/toggle/test/basic/main.html
index 65b48fe0e3..e5089207c1 100644
--- a/ionic/components/toggle/test/basic/main.html
+++ b/ionic/components/toggle/test/basic/main.html
@@ -8,29 +8,35 @@
 
     <ion-list>
 
-      <ion-toggle value="apple" checked="true" ngControl="appleCtrl">
-        Apple, value=apple, init checked
-      </ion-toggle>
+      <ion-item>
+        <ion-label>Apple, value=apple, init checked</ion-label>
+        <ion-toggle value="apple" checked="true" ngControl="appleCtrl"></ion-toggle>
+      </ion-item>
 
-      <ion-toggle ngControl="bananaCtrl">
-        Banana, init no checked/value attributes
-      </ion-toggle>
+      <ion-item>
+        <ion-label>Banana, init no checked/value attributes</ion-label>
+        <ion-toggle ngControl="bananaCtrl"></ion-toggle>
+      </ion-item>
 
-      <ion-toggle value="cherry" disabled="true" ngControl="cherryCtrl">
-        Cherry, value=cherry, init disabled
-      </ion-toggle>
+      <ion-item>
+        <ion-label>Cherry, value=cherry, init disabled</ion-label>
+        <ion-toggle value="cherry" disabled="true" ngControl="cherryCtrl"></ion-toggle>
+      </ion-item>
 
-      <ion-toggle value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ngControl="grapeCtrl">
-        Grape, value=grape, init checked, disabled
-      </ion-toggle>
+      <ion-item>
+        <ion-label>Grape, value=grape, init checked, disabled</ion-label>
+        <ion-toggle value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ngControl="grapeCtrl"></ion-toggle>
+      </ion-item>
 
-      <ion-toggle secondary checked="true">
-        Secondary color
-      </ion-toggle>
+      <ion-item>
+        <ion-label>Secondary color</ion-label>
+        <ion-toggle secondary checked="true"></ion-toggle>
+      </ion-item>
 
-      <ion-toggle value="apple" checked="true" [(ngModel)]="myModel">
-        I'm an NgModel
-      </ion-toggle>
+      <ion-item>
+        <ion-label>I'm an NgModel</ion-label>
+        <ion-toggle value="apple" checked="true" [(ngModel)]="myModel"></ion-toggle>
+      </ion-item>
 
     </ion-list>
 
diff --git a/ionic/components/toggle/toggle.ios.scss b/ionic/components/toggle/toggle.ios.scss
index e222eae2f4..53581057c1 100644
--- a/ionic/components/toggle/toggle.ios.scss
+++ b/ionic/components/toggle/toggle.ios.scss
@@ -26,37 +26,20 @@ $toggle-ios-media-padding:             6px ($item-ios-padding-right / 2) 5px ($i
 $toggle-ios-transition-duration:       300ms !default;
 
 $toggle-ios-disabled-opacity:          0.5 !default;
-$toggle-ios-disabled-text-color:       $subdued-text-ios-color !default;
 
 
-// Toggle
+// iOS Toggle
 // -----------------------------------------
 
 ion-toggle {
-  display: block;
-  @include user-select-none();
-
-  &.item.activated {
-    background: $list-ios-background-color;
-  }
+  position: relative;
 }
 
 
-// Toggle Wrapper
-// -----------------------------------------
-
-.toggle-media {
-  margin: $toggle-ios-media-margin;
-  padding: $toggle-ios-media-padding;
-  cursor: pointer;
-}
-
-
-// Toggle Background Track
+// iOS Toggle Background Track: Unchecked
 // -----------------------------------------
 
 .toggle-icon {
-  // bg track, when not checked
   position: relative;
   display: block;
   width: $toggle-ios-width;
@@ -69,11 +52,10 @@ ion-toggle {
 }
 
 
-// Toggle Background Track, Inner Oval
+// iOS Toggle Background Oval: Unchecked
 // -----------------------------------------
 
 .toggle-icon:before {
-  // inner bg track's oval, when not checked
   content: '';
   position: absolute;
   top: $toggle-ios-border-width;
@@ -89,12 +71,10 @@ ion-toggle {
 }
 
 
-// Toggle Knob
+// iOS Toggle Inner Knob: Unchecked
 // -----------------------------------------
 
-.toggle-icon:after {
-  // knob, when not checked
-  content: '';
+.toggle-inner {
   position: absolute;
   top: $toggle-ios-border-width;
   left: $toggle-ios-border-width;
@@ -110,65 +90,96 @@ ion-toggle {
 }
 
 
-// Toggle Checked
+// iOS Toggle Background Track: Checked
 // -----------------------------------------
 
-ion-toggle[aria-checked=true] {
-  .toggle-icon {
-    // bg track, when checked
-    background-color: $toggle-ios-background-color-on;
-
-    &:before {
-      // inner bg track's oval, when checked
-      transform: scale3d(0, 0, 0);
-    }
-
-    &:after {
-      // knob, when checked
-      transform: translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0);
-    }
-  }
-
-  .toggle-activated .toggle-icon {
-    &:before {
-      // inner bg track's oval, when checked
-      transform: scale3d(0, 0, 0);
-    }
-
-    &:after {
-      // when pressing down on the toggle and IS checked
-      // make the knob wider and move it left a bit
-      left: $toggle-ios-border-width - 6;
-
-      // when pressing down on the toggle and NOT checked
-      // then make the knob wider
-      width: $toggle-ios-handle-width + 6;
-    }
-  }
+.toggle-checked {
+  background-color: $toggle-ios-background-color-on;
 }
 
 
-// Toggle Disabled
+// iOS Toggle Background Oval: Activated or Checked
 // -----------------------------------------
 
-ion-toggle[aria-disabled=true] {
+.toggle-activated:before,
+.toggle-checked:before {
+  transform: scale3d(0, 0, 0);
+}
+
+
+// iOS Toggle Inner Knob: Checked
+// -----------------------------------------
+
+.toggle-checked .toggle-inner {
+  transform: translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0);
+
+}
+
+// iOS Toggle Background Oval: Activated and Checked
+// -----------------------------------------
+
+.toggle-activated.toggle-checked:before {
+  transform: scale3d(0, 0, 0);
+}
+
+
+// iOS Toggle Inner Knob: Activated and Unchecked
+// -----------------------------------------
+
+.toggle-activated .toggle-inner {
+  width: $toggle-ios-handle-width + 6;
+}
+
+
+// iOS Toggle Inner Knob: Activated and Checked
+// -----------------------------------------
+
+.toggle-activated.toggle-checked .toggle-inner {
+  // when pressing down on the toggle and IS checked
+  // make the knob wider and move it left a bit
+  left: $toggle-ios-border-width - 6;
+}
+
+
+// iOS Toggle: Disabled
+// -----------------------------------------
+
+.toggle-disabled,
+.item-toggle-disabled ion-label {
   opacity: $toggle-ios-disabled-opacity;
-  color: $toggle-ios-disabled-text-color;
   pointer-events: none;
 }
 
+.toggle-disabled ion-radio {
+  opacity: $toggle-ios-disabled-opacity;
+}
+
+
+// iOS Toggle within an item
+// -----------------------------------------
+
+.item ion-toggle {
+  margin: $toggle-ios-media-margin;
+  padding: $toggle-ios-media-padding;
+}
+
+
+// iOS Toggle Within An Item
+// -----------------------------------------
+
+.item ion-toggle {
+  margin: $toggle-ios-media-margin;
+  padding: $toggle-ios-media-padding;
+}
+
 
 // iOS Toggle Color Mixin
 // --------------------------------------------------
 
-@mixin ios-toggle-theme($color-name, $bg-on) {
-
-  ion-toggle[#{$color-name}] {
-
-    &[aria-checked=true] .toggle-icon {
-      background-color: $bg-on;
-    }
+@mixin ios-toggle-theme($color-name, $color-value) {
 
+  ion-toggle[#{$color-name}] .toggle-checked {
+    background-color: $color-value;
   }
 
 }
@@ -177,6 +188,8 @@ ion-toggle[aria-disabled=true] {
 // Generate iOS Toggle Colors
 // --------------------------------------------------
 
-@each $color-name, $value in $colors-ios {
-  @include ios-toggle-theme($color-name, $value);
+@each $color-name, $color-value in $colors-ios {
+
+  @include ios-toggle-theme($color-name, $color-value);
+
 }
diff --git a/ionic/components/toggle/toggle.md.scss b/ionic/components/toggle/toggle.md.scss
index 230dbb6476..3f609ae79d 100644
--- a/ionic/components/toggle/toggle.md.scss
+++ b/ionic/components/toggle/toggle.md.scss
@@ -23,33 +23,20 @@ $toggle-md-media-padding:                12px ($item-md-padding-right / 2) 12px
 $toggle-md-transition-duration:          300ms !default;
 
 $toggle-md-disabled-opacity:             0.5 !default;
-$toggle-md-disabled-text-color:          $subdued-text-md-color !default;
 
 
-// Toggle
+// Material Design Toggle
 // -----------------------------------------
 
 ion-toggle {
-  display: block;
-  @include user-select-none();
+  position: relative;
 }
 
 
-// Toggle Wrapper
-// -----------------------------------------
-
-.toggle-media {
-  margin: $toggle-md-media-margin;
-  padding: $toggle-md-media-padding;
-  cursor: pointer;
-}
-
-
-// Toggle Background Track
+// Material Design Toggle Background Track: Unchecked
 // -----------------------------------------
 
 .toggle-icon {
-  // bg track, when not checked
   position: relative;
   display: block;
   width: $toggle-md-track-width;
@@ -62,12 +49,10 @@ ion-toggle {
 }
 
 
-// Toggle Knob
+// Material Design Toggle Inner Knob: Unchecked
 // -----------------------------------------
 
-.toggle-icon:after {
-  // knob, when not checked
-  content: '';
+.toggle-inner {
   position: absolute;
   top: ($toggle-md-handle-height - $toggle-md-track-height) / -2;
   left: 0;
@@ -85,44 +70,70 @@ ion-toggle {
 }
 
 
-// Toggle Checked
+// Material Design Toggle Background Track: Checked
 // -----------------------------------------
 
-ion-toggle[aria-checked=true] .toggle-icon {
-  // bg track, when not checked
+.toggle-checked {
   background-color: $toggle-md-track-background-color-on;
-
-  &:after {
-    // knob, when not checked
-    background-color: $toggle-md-handle-background-color-on;
-    transform: translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0);
-  }
 }
 
 
-// Toggle Disabled
+// Material Design Toggle Inner Knob: Checked
 // -----------------------------------------
 
-ion-toggle[aria-disabled=true] {
+.toggle-checked .toggle-inner {
+  background-color: $toggle-md-handle-background-color-on;
+  transform: translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0);
+}
+
+
+// Material Design Toggle: Disabled
+// -----------------------------------------
+
+.toggle-disabled,
+.item-toggle-disabled ion-label {
   opacity: $toggle-md-disabled-opacity;
-  color: $toggle-md-disabled-text-color;
   pointer-events: none;
 }
 
+.toggle-disabled ion-radio {
+  opacity: $toggle-md-disabled-opacity;
+}
+
+
+// Material Design Toggle within an item
+// -----------------------------------------
+
+.item ion-toggle {
+  margin: $toggle-md-media-margin;
+  padding: $toggle-md-media-padding;
+  cursor: pointer;
+}
+
+
+// Material Design Toggle Within An Item
+// -----------------------------------------
+
+.item ion-toggle {
+  margin: $toggle-md-media-margin;
+  padding: $toggle-md-media-padding;
+  cursor: pointer;
+}
+
 
 // Material Design Color Mixin
 // --------------------------------------------------
 
-@mixin toggle-theme-md($color-name, $bg-on) {
+@mixin toggle-theme-md($color-name, $color-value) {
 
   ion-toggle[#{$color-name}] {
 
-    &[aria-checked=true] .toggle-icon {
-      background-color: lighten($bg-on, 25%);
+    .toggle-checked {
+      background-color: lighten($color-value, 25%);
     }
 
-    &[aria-checked=true] .toggle-icon:after {
-      background-color: $bg-on;
+    .toggle-checked .toggle-inner {
+      background-color: $color-value;
     }
 
   }
@@ -133,8 +144,8 @@ ion-toggle[aria-disabled=true] {
 // Generate Material Design Toggle Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $value in $colors-md {
+@each $color-name, $color-value in $colors-md {
 
-  @include toggle-theme-md($color-name, $value);
+  @include toggle-theme-md($color-name, $color-value);
 
 }
diff --git a/ionic/components/toggle/toggle.ts b/ionic/components/toggle/toggle.ts
index 22346a282b..051f600c7f 100644
--- a/ionic/components/toggle/toggle.ts
+++ b/ionic/components/toggle/toggle.ts
@@ -1,16 +1,19 @@
-import {Component, ElementRef, Renderer, Input, HostListener, Optional} from 'angular2/core';
+import {Component, ElementRef, Renderer, Input, Optional} from 'angular2/core';
 import {NgControl} from 'angular2/common';
 
-import {Form} from '../../util/form';
 import {Config} from '../../config/config';
+import {Form} from '../../util/form';
+import {Item} from '../item/item';
 import {pointerCoord} from '../../util/dom';
 
 
 /**
  * @name Toggle
  * @description
- * A toggle technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Ionic prefers to wrap the checkbox input with the `<label>` in order to make the entire toggle easy to tap or drag.
- * Togglees can also have colors assigned to them, by adding any color attribute to them.
+ * A toggle technically is the same thing as an HTML checkbox input,
+ * except it looks different and is easier to use on a touch device.
+ * Toggles can also have colors assigned to them, by adding any color
+ * attribute.
  *
  * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
  * @property {any} [value] - the inital value of the toggle
@@ -19,25 +22,23 @@ import {pointerCoord} from '../../util/dom';
  * @property {string} [id] - a unique ID for a toggle
  * @usage
  * ```html
- * <!-- Create a single toggle -->
- *  <ion-toggle checked="true">
- *    Pineapple
- *  </ion-toggle>
  *
- * <!-- Create a list of togglees -->
  *  <ion-list>
  *
- *    <ion-toggle checked="true">
- *      Apple
- *    </ion-toggle>
+ *    <ion-item>
+ *      <ion-label>Pepperoni</ion-label>
+ *      <ion-toggle value="pepperoni" checked="true"></ion-toggle>
+ *    </ion-item>
  *
- *     <ion-toggle checked="false">
- *       Banana
- *     </ion-toggle>
+ *    <ion-item>
+ *      <ion-label>Sausage</ion-label>
+ *      <ion-toggle value="sausage"></ion-toggle>
+ *    </ion-item>
  *
- *     <ion-toggle disabled="true">
- *       Cherry
- *     </ion-toggle>
+ *    <ion-item>
+ *      <ion-label>Mushrooms</ion-label>
+ *      <ion-toggle value="mushrooms"></ion-toggle>
+ *    </ion-item>
  *
  *  </ion-list>
  * ```
@@ -46,49 +47,48 @@ import {pointerCoord} from '../../util/dom';
  */
 @Component({
   selector: 'ion-toggle,ion-switch',
-  host: {
-    'role': 'checkbox',
-    'class': 'item',
-    'tappable': '',
-    'tabindex': '0',
-    '[attr.aria-disabled]': 'disabled',
-    '(touchstart)': 'pointerDown($event)',
-    '(mousedown)': 'pointerDown($event)',
-    '(touchend)': 'pointerUp($event)',
-    '(mouseup)': 'pointerUp($event)'
-  },
   template:
-    '<ng-content select="[item-left]"></ng-content>' +
-    '<div class="item-inner">' +
-      '<ion-item-content id="{{labelId}}">' +
-        '<ng-content></ng-content>' +
-      '</ion-item-content>' +
-      '<div class="toggle-media" [class.toggle-activated]="isActivated" disable-activated>' +
-        '<div class="toggle-icon"></div>' +
-      '</div>' +
-    `</div>`
+    '<div class="toggle-icon" [class.toggle-checked]="_checked" [class.toggle-activated]="_activated">' +
+      '<div class="toggle-inner"></div>' +
+    '</div>' +
+    '<button role="checkbox" ' +
+            '[id]="id" ' +
+            '[attr.aria-checked]="_checked" ' +
+            '[attr.aria-labelledby]="_labelId" ' +
+            '[attr.aria-disabled]="_disabled" ' +
+            '(touchstart)=pointerDown($event) ' +
+            '(touchmove)=pointerMove($event) ' +
+            '(mousemove)=pointerMove($event) ' +
+            '(mousedown)=pointerDown($event) ' +
+            '(touchend)=pointerUp($event) ' +
+            '(mouseup)=pointerUp($event) ' +
+            '(mouseout)=pointerUp($event) ' +
+            'class="item-cover">' +
+    '</button>',
+  host: {
+    '[class.toggle-disabled]': '_disabled'
+  }
 })
 export class Toggle {
-  private _checked: boolean;
+  private _checked: any = false;
+  private _disabled: any = false;
+  private _labelId: string;
+  private _activated: boolean = false;
   private _mode: string;
   private _startX;
   private _touched: number = 0;
-  private addMoveListener;
-  private removeMoveListener;
 
-  public isActivated: boolean;
-  public labelId: string;
+  id: string;
 
   @Input() value: string = '';
-  @Input() disabled: boolean = false;
-  @Input() id: string;
 
   constructor(
     private _form: Form,
     private _elementRef: ElementRef,
     private _renderer: Renderer,
     config: Config,
-    @Optional() ngControl: NgControl
+    @Optional() ngControl: NgControl,
+    @Optional() private _item: Item
   ) {
     // deprecated warning
     if (_elementRef.nativeElement.tagName == 'ION-SWITCH') {
@@ -103,56 +103,14 @@ export class Toggle {
       ngControl.valueAccessor = this;
     }
 
-    let self = this;
-    function pointerMove(ev) {
-      let currentX = pointerCoord(ev).x;
-
-      if (self.checked) {
-        if (currentX + 15 < self._startX) {
-          self.toggle();
-          self._startX = currentX;
-        }
-      } else if (currentX - 15 > self._startX) {
-        self.toggle();
-        self._startX = currentX;
-      }
+    if (_item) {
+      this.id = 'tgl-' + _item.registerInput('toggle');
+      this._labelId = 'lbl-' + _item.id;
     }
-
-    function pointerOut(ev) {
-      if (ev.currentTarget === ev.target) {
-        self.pointerUp(ev);
-      }
-    }
-
-    let toggleEle = _elementRef.nativeElement.querySelector('.toggle-media');
-
-    this.addMoveListener = function() {
-      toggleEle.addEventListener('touchmove', pointerMove);
-      toggleEle.addEventListener('mousemove', pointerMove);
-      _elementRef.nativeElement.addEventListener('mouseout', pointerOut);
-    };
-
-    this.removeMoveListener = function() {
-      toggleEle.removeEventListener('touchmove', pointerMove);
-      toggleEle.removeEventListener('mousemove', pointerMove);
-      _elementRef.nativeElement.removeEventListener('mouseout', pointerOut);
-    };
   }
 
   /**
    * @private
-   */
-  ngOnInit() {
-    if (!this.id) {
-      this.id = 'tgl-' + this._form.nextId();
-      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', this.id);
-    }
-
-    this.labelId = 'lbl-' + this.id;
-    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', this.labelId);
-  }
-
-  /**
    * Toggle the checked state of this toggle.
    */
   toggle() {
@@ -160,14 +118,26 @@ export class Toggle {
   }
 
   @Input()
-  get checked(): boolean {
-    return !!this._checked;
+  get checked() {
+    return this._checked;
   }
 
-  set checked(val: boolean) {
-    this._checked = !!val;
-    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-checked', this._checked.toString());
-    this.onChange(this._checked);
+  set checked(val) {
+    if (!this._disabled) {
+      this._checked = (val === true || val === 'true');
+      this.onChange(this._checked);
+      this._item && this._item.setCssClass('item-toggle-checked', this._checked);
+    }
+  }
+
+  @Input()
+  get disabled() {
+    return this._disabled;
+  }
+
+  set disabled(val) {
+    this._disabled = (val === true || val === 'true');
+    this._item && this._item.setCssClass('item-toggle-disabled', this._disabled);
   }
 
   /**
@@ -178,34 +148,59 @@ export class Toggle {
       this._touched = Date.now();
     }
 
-    if (this.isDisabled(ev)) return;
+    if (this.isDisabled(ev)) {
+      return;
+    }
 
     this._startX = pointerCoord(ev).x;
 
-    this.removeMoveListener();
-    this.addMoveListener();
+    this._activated = true;
+  }
 
-    this.isActivated = true;
+  /**
+   * @private
+   */
+  private pointerMove(ev) {
+    if (this._startX) {
+      let currentX = pointerCoord(ev).x;
+      console.debug('toggle move', ev.type, currentX);
+
+      if (this._checked) {
+        if (currentX + 15 < this._startX) {
+          this.toggle();
+          this._startX = currentX;
+        }
+
+      } else if (currentX - 15 > this._startX) {
+        this.toggle();
+        this._startX = currentX;
+      }
+    }
   }
 
   /**
    * @private
    */
   private pointerUp(ev) {
-    if (this.isDisabled(ev)) return;
+    if (this._startX) {
 
-    let endX = pointerCoord(ev).x;
+      if (this.isDisabled(ev)) {
+        return;
+      }
 
-    if (this.checked) {
-      if (this._startX + 4 > endX) {
+      let endX = pointerCoord(ev).x;
+
+      if (this.checked) {
+        if (this._startX + 4 > endX) {
+          this.toggle();
+        }
+      } else if (this._startX - 4 < endX) {
         this.toggle();
       }
-    } else if (this._startX - 4 < endX) {
-      this.toggle();
-    }
 
-    this.removeMoveListener();
-    this.isActivated = false;
+      this._activated = false;
+      this._startX = null;
+    }
   }
 
   /**
@@ -243,22 +238,15 @@ export class Toggle {
    * @private
    */
   ngOnDestroy() {
-    this.removeMoveListener();
-    this.addMoveListener = this.removeMoveListener = null;
     this._form.deregister(this);
   }
 
   /**
    * @private
    */
-  isDisabled(ev) {
-    return (this._touched + 999 > Date.now() && /mouse/.test(ev.type)) || (this._mode == 'ios' && ev.target.tagName == 'ION-TOGGLE');
+  private isDisabled(ev) {
+    return (this._touched + 999 > Date.now() && (ev.type.indexOf('mouse') > -1))
+           || (this._mode == 'ios' && ev.target.tagName == 'ION-TOGGLE');
   }
 
-  /**
-   * @private
-   */
-  initFocus() {
-
-  }
 }
diff --git a/ionic/config/directives.ts b/ionic/config/directives.ts
index d0367d1aaf..9fc4c72274 100644
--- a/ionic/config/directives.ts
+++ b/ionic/config/directives.ts
@@ -15,7 +15,6 @@ import {Slides, Slide, SlideLazy} from '../components/slides/slides';
 import {Tabs} from '../components/tabs/tabs';
 import {Tab} from '../components/tabs/tab';
 import {List, ListHeader} from '../components/list/list';
-import {ItemInput} from '../components/input/input';
 import {Item} from '../components/item/item';
 import {ItemSliding} from '../components/item/item-sliding';
 import {Toolbar, ToolbarTitle, ToolbarItem} from '../components/toolbar/toolbar';
@@ -24,10 +23,11 @@ import {Checkbox} from '../components/checkbox/checkbox';
 import {Select} from '../components/select/select';
 import {Option} from '../components/option/option';
 import {Toggle} from '../components/toggle/toggle';
-import {TextInput} from '../components/text-input/text-input';
+import {TextInput, TextArea} from '../components/input/input';
 import {Label} from '../components/label/label';
 import {Segment, SegmentButton} from '../components/segment/segment';
-import {RadioGroup, RadioButton} from '../components/radio/radio';
+import {RadioButton} from '../components/radio/radio-button';
+import {RadioGroup} from '../components/radio/radio-group';
 import {Searchbar, SearchbarInput} from '../components/searchbar/searchbar';
 import {Nav} from '../components/nav/nav';
 import {NavPush, NavPop} from '../components/nav/nav-push';
@@ -91,7 +91,6 @@ import {ShowWhen, HideWhen} from '../components/show-hide-when/show-hide-when';
  * -  Select
  * -  Option
  * -  Toggle
- * -  ItemInput
  * -  TextInput
  * -  Label
  *
@@ -159,7 +158,7 @@ export const IONIC_DIRECTIVES = [
   Select,
   Option,
   Toggle,
-  ItemInput,
+  TextArea,
   TextInput,
   Label,
 
diff --git a/ionic/util/form.ts b/ionic/util/form.ts
index 2d527d5522..b3df421c81 100644
--- a/ionic/util/form.ts
+++ b/ionic/util/form.ts
@@ -15,7 +15,7 @@ import {Injectable} from 'angular2/core';
  @Injectable()
 export class Form {
   private _blur: HTMLElement;
-  private _focused: any = null;
+  private _focused = null;
   private _ids: number = -1;
   private _inputs: Array<any> = [];
 
@@ -65,13 +65,12 @@ export class Form {
   /**
    * Focuses the next input element, if it exists.
    */
-  focusNext(currentInput) {
-    console.debug('focusNext');
-
+  tabFocus(currentInput) {
     let index = this._inputs.indexOf(currentInput);
     if (index > -1 && (index + 1) < this._inputs.length) {
       let nextInput = this._inputs[index + 1];
       if (nextInput !== this._focused) {
+        console.debug('tabFocus, next');
         return nextInput.initFocus();
       }
     }
@@ -80,6 +79,7 @@ export class Form {
     if (index > 0) {
       let previousInput = this._inputs[index - 1];
       if (previousInput) {
+        console.debug('tabFocus, previous');
         previousInput.initFocus();
       }
     }
diff --git a/ionic/util/util.scss b/ionic/util/util.scss
index dba4404a59..0ba1764fc3 100755
--- a/ionic/util/util.scss
+++ b/ionic/util/util.scss
@@ -79,7 +79,7 @@ $focus-outline-box-shadow:     0px 0px 8px 0px $focus-outline-border-color !defa
     outline: thin solid $focus-outline-border-color;
   }
 
-  ion-input.input-focused,
+  ion-input.input-has-focus,
   button[ion-item]:focus,
   a[ion-item]:focus {
     border-color: $focus-outline-border-color;
@@ -110,22 +110,6 @@ focus-ctrl {
   }
 }
 
-.hide-focused-input {
-  flex: 0 0 8px !important;
-  margin: 0 !important;
-  transform: translate3d(-9999px,0,0);
-  pointer-events: none;
-}
-
-[floating-label] .hide-focused-input,
-[stacked-label] .hide-focused-input {
-  margin-top: -8px !important;
-}
-
-.cloned-input {
-  pointer-events: none;
-}
-
 
 // Backdrop
 // --------------------------------------------------
diff --git a/scripts/snapshot/snapshot.config.js b/scripts/snapshot/snapshot.config.js
index 3a546721a0..22e81b8977 100644
--- a/scripts/snapshot/snapshot.config.js
+++ b/scripts/snapshot/snapshot.config.js
@@ -8,8 +8,8 @@ exports.config = {
   domain: 'ionic-snapshot-go.appspot.com',
   //domain: 'localhost:8080',
 
-  specs: 'dist/e2e/**/*e2e.js',
-  //specs: 'dist/e2e/action-sheet/**/*e2e.js',
+  //specs: 'dist/e2e/**/*e2e.js',
+  specs: 'dist/e2e/checkbox/**/*e2e.js',
 
   sleepBetweenSpecs: 350,