refactor(input): place inputs inside of ion-item

2026-03-13 10:22:08 +08:00 · 2016-01-20 21:41:54 -06:00
parent e4b200639e
commit b3a7298a52
60 changed files with 2528 additions and 1727 deletions
--- 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] {
--- 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] {
--- 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;
+}
--- 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));
 }
--- a/ionic/components/input/native-input.ts
+++ b/ionic/components/input/native-input.ts
@@ -0,0 +1,140 @@
+import {Directive, Attribute, ElementRef, Renderer, Input, Output, EventEmitter, HostListener} from 'angular2/core';
+import {NgControl} from 'angular2/common';
+
+import {CSS, hasFocus, raf}  from '../../util/dom';
+
+
+/**
+ * @private
+ */
+@Directive({
+  selector: '.text-input'
+})
+export class NativeInput {
+  private _relocated: boolean;
+
+  @Output() focusChange: EventEmitter<boolean> = new EventEmitter();
+  @Output() valueChange: EventEmitter<string> = new EventEmitter();
+
+  constructor(
+    private _elementRef: ElementRef,
+    private _renderer: Renderer,
+    public ngControl: NgControl
+  ) {}
+
+  /**
+   * @private
+   */
+  @HostListener('input', ['$event'])
+  private _change(ev) {
+    this.valueChange.emit(ev.target.value);
+  }
+
+  /**
+   * @private
+   */
+  @HostListener('focus')
+  private _focus() {
+    this.focusChange.emit(true);
+  }
+
+  /**
+   * @private
+   */
+  @HostListener('blur')
+  private _blur() {
+    this.focusChange.emit(false);
+    this.hideFocus(false);
+  }
+
+  labelledBy(val: string) {
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', val);
+  }
+
+  /**
+   * @private
+   */
+  setFocus() {
+    this.element().focus();
+  }
+
+  /**
+   * @private
+   */
+  relocate(shouldRelocate: boolean, inputRelativeY: number) {
+    if (this._relocated !== shouldRelocate) {
+
+      let focusedInputEle = this.element();
+      if (shouldRelocate) {
+        let clonedInputEle = cloneInput(focusedInputEle, 'cloned-input');
+
+        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.style[CSS.transform] = '';
+        focusedInputEle.style.display = '';
+        focusedInputEle.style.opacity = '';
+
+        removeClone(focusedInputEle, 'cloned-input');
+      }
+
+      this._relocated = shouldRelocate;
+    }
+  }
+
+  /**
+   * @private
+   */
+  hideFocus(shouldHideFocus: boolean) {
+    let focusedInputEle = this.element();
+
+    if (shouldHideFocus) {
+      let clonedInputEle = cloneInput(focusedInputEle, 'cloned-hidden');
+
+      focusedInputEle.style.display = 'none';
+      focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
+
+    } else {
+      focusedInputEle.style.display = '';
+
+      removeClone(focusedInputEle, 'cloned-hidden');
+    }
+  }
+
+  hasFocus(): boolean {
+    return hasFocus(this.element());
+  }
+
+  /**
+   * @private
+   */
+  element(): HTMLElement {
+    return this._elementRef.nativeElement;
+  }
+
+}
+
+function cloneInput(focusedInputEle, addCssClass) {
+  let clonedInputEle = focusedInputEle.cloneNode(true);
+  clonedInputEle.classList.add(addCssClass);
+  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);
+  }
+}
--- 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';
+  }
+}
--- 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>
--- 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>

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

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

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

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

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