From 1fffdc4055c30cc8bf4b84e1f40714a696fd4e0d Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Mon, 9 Jul 2018 17:50:02 -0400
Subject: [PATCH] docs(input): update documentation and add usage

---
 core/src/components/input/readme.md           |  4 +-
 core/src/components/input/usage/angular.md    | 43 +++++++++++++++++++
 core/src/components/input/usage/javascript.md | 43 +++++++++++++++++++
 3 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 core/src/components/input/usage/angular.md
 create mode 100644 core/src/components/input/usage/javascript.md

diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md
index 6fef891ed6..2386e7d072 100644
--- a/core/src/components/input/readme.md
+++ b/core/src/components/input/readme.md
@@ -1,6 +1,8 @@
 # ion-input
 
-Input is a component similar to the HTML input element. It accepts most of the standard properties/attributes as the HTML input, but is styled to fit Ionic's UI.
+The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input, but works great on desktop devices and integrates with the keyboard on mobile devices.
+
+It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, and `"url"`. It supports all standard text input events including keyup, keydown, keypress, and more.
 
 
 <!-- Auto Generated Below -->
diff --git a/core/src/components/input/usage/angular.md b/core/src/components/input/usage/angular.md
new file mode 100644
index 0000000000..06f4a6594a
--- /dev/null
+++ b/core/src/components/input/usage/angular.md
@@ -0,0 +1,43 @@
+```html
+<!-- Default Input -->
+<ion-input></ion-input>
+
+<!-- Input with value -->
+<ion-input value="custom"></ion-input>
+
+<!-- Input with placeholder -->
+<ion-input placeholder="Enter Input"></ion-input>
+
+<!-- Input with clear button when there is a value -->
+<ion-input clearInput value="clear me"></ion-input>
+
+<!-- Number type input -->
+<ion-input type="number" value="333"></ion-input>
+
+<!-- Disabled input -->
+<ion-input value="Disabled" disabled></ion-input>
+
+<!-- Readonly input -->
+<ion-input value="Readonly" readonly></ion-input>
+
+<!-- Inputs with labels -->
+<ion-item>
+  <ion-label>Default Label</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="floating">Floating Label</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="fixed">Fixed Label</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="stacked">Stacked Label</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+```
\ No newline at end of file
diff --git a/core/src/components/input/usage/javascript.md b/core/src/components/input/usage/javascript.md
new file mode 100644
index 0000000000..d6b7d9c63c
--- /dev/null
+++ b/core/src/components/input/usage/javascript.md
@@ -0,0 +1,43 @@
+```html
+<!-- Default Input -->
+<ion-input></ion-input>
+
+<!-- Input with value -->
+<ion-input value="custom"></ion-input>
+
+<!-- Input with placeholder -->
+<ion-input placeholder="Enter Input"></ion-input>
+
+<!-- Input with clear button when there is a value -->
+<ion-input clear-input value="clear me"></ion-input>
+
+<!-- Number type input -->
+<ion-input type="number" value="333"></ion-input>
+
+<!-- Disabled input -->
+<ion-input value="Disabled" disabled></ion-input>
+
+<!-- Readonly input -->
+<ion-input value="Readonly" readonly></ion-input>
+
+<!-- Inputs with labels -->
+<ion-item>
+  <ion-label>Default Label</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="floating">Floating Label</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="fixed">Fixed Label</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="stacked">Stacked Label</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+```
\ No newline at end of file