diff --git a/scss/atat.scss b/scss/atat.scss
index 2810db63..e8cbb614 100644
--- a/scss/atat.scss
+++ b/scss/atat.scss
@@ -5,12 +5,12 @@
 @import 'core/util';
 
 @import 'elements/typography';
+@import 'elements/icons';
 @import 'elements/inputs';
 @import 'elements/buttons';
 @import 'elements/panels';
 @import 'elements/block_lists';
 @import 'elements/tables';
-@import 'elements/icons';
 @import 'elements/sidenav';
 @import 'elements/action_group';
 
diff --git a/scss/core/_util.scss b/scss/core/_util.scss
index 505b4ed5..9b716bee 100644
--- a/scss/core/_util.scss
+++ b/scss/core/_util.scss
@@ -23,3 +23,7 @@
   position: unset;
   width: unset;
 }
+
+@mixin line-max {
+  max-width: 45em;
+}
diff --git a/scss/elements/_inputs.scss b/scss/elements/_inputs.scss
index b3151653..a3d8b222 100644
--- a/scss/elements/_inputs.scss
+++ b/scss/elements/_inputs.scss
@@ -4,6 +4,116 @@
  * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_inputs.scss
  */
 
+@mixin input-icon {
+  width: 1.6rem;
+  height: 1.6rem;
+  display: block;
+}
+
+@mixin input-state($state) {
+  $border-width: 1px;
+  $state-color: $color-gray;
+
+  @if $state == 'error' {
+    $border-width: 2px;
+    $state-color: $color-red;
+
+  } @else if $state == 'warning' {
+    $border-width: 2px;
+    $state-color: $color-gold;
+
+  } @else if $state == 'success' {
+    $border-width: 2px;
+    $state-color: $color-green;
+  }
+
+  .icon {
+    @include icon-color($state-color);
+  }
+
+  .usa-input__message {
+    color: $state-color;
+  }
+
+  input,
+  textarea,
+  select {
+    border-color: $state-color;
+    border-width: $border-width;
+  }
+}
+
+.usa-input {
+  margin: ($gap * 4) 0;
+
+  label {
+    padding: 0 0 $gap 0;
+    @include h4;
+    @include line-max;
+    position: relative;
+
+    .usa-input__help {
+      display: block;
+      @include h5;
+      font-weight: normal;
+      padding-top: $gap / 2;
+      @include line-max;
+    }
+
+    .icon {
+      position: absolute;
+      left: 100%;
+      top: 100%;
+      margin-top: 1.4rem;
+      margin-left: $gap;
+    }
+  }
+
+  input,
+  textarea,
+  select {
+    @include line-max;
+    margin: 0;
+  }
+
+  .usa-input__choices { // checkbox & radio sets
+    legend {
+      padding: 0 0 $gap 0;
+      @include h4;
+    }
+
+    label {
+      font-weight: normal;
+      margin: 0;
+    }
+
+    &.usa-input__choices--inline {
+      label {
+        display: inline-block;
+        padding-right: $gap * 3;
+      }
+    }
+  }
+
+  .usa-input__message {
+    @include h5;
+    display: inline-block;
+    padding-top: $gap;
+  }
+
+  &.usa-input--error {
+    @include input-state('error');
+  }
+
+  &.usa-input--warning {
+    @include input-state('warning');
+  }
+
+  &.usa-input--success {
+    @include input-state('success');
+  }
+}
+
 select {
   border-radius: 0;
   -webkit-appearance: none;
@@ -39,4 +149,4 @@ select {
     min-height: 4.4rem;
   }
 
-}
\ No newline at end of file
+}
diff --git a/scss/elements/_typography.scss b/scss/elements/_typography.scss
index 57e310db..8a292e73 100644
--- a/scss/elements/_typography.scss
+++ b/scss/elements/_typography.scss
@@ -11,7 +11,7 @@
 
 p {
   margin: 0 0 ($gap * 2) 0;
-  max-width: 45em;
+  @include line-max;
 }
 
 h1, h2, h3, h4, h5, h6 {
diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to
index 9d7212a7..4718aa14 100644
--- a/templates/styleguide.html.to
+++ b/templates/styleguide.html.to
@@ -127,6 +127,133 @@
         <div class='col col--grow'>col 11</div>
         <div class='col col--grow'>col 12</div>
       </div>
+
+
+      <form>
+        <div class='usa-input'>
+          <label for='basic-text-1'>
+            Basic Text Input
+            <span class='usa-input__help'>
+              This is some help text to explain what this form field is and why you should fill it out.
+            </span>
+          </label>
+          <input id='basic-text-1' type='text' placeholder='this is a sample of what you should enter'/>
+        </div>
+
+        <div class='usa-input usa-input--error'>
+          <label for='basic-text'>
+            Erroneous Text Input
+            <span class='usa-input__help'>
+              This is some help text to explain what this form field is and why you should fill it out.
+            </span>
+            {% module Icon('alert') %}
+          </label>
+          <input id='basic-text-2' type='text' placeholder='this is a sample of what you should enter' aria-invalid='true' aria-describedby='basic-text-2__errors'/>
+          <span id='basic-text-2__errors' class='usa-input__message'>Oh boy you really screwed up big time, didn't you!</span>
+        </div>
+
+        <div class='usa-input usa-input--warning'>
+          <label for='basic-text'>
+            Warning Text Input
+            <span class='usa-input__help'>
+              This is some help text to explain what this form field is and why you should fill it out.
+            </span>
+            {% module Icon('alert') %}
+          </label>
+          <input id='basic-text-2' type='text' placeholder='this is a sample of what you should enter' aria-describedby='basic-text-2__errors'/>
+          <span id='basic-text-2__errors' class='usa-input__message'>Oh boy you really screwed up big time, didn't you!</span>
+        </div>
+
+        <div class='usa-input'>
+          <label for='basic-text'>
+            Basic Text Input with a really long label that wraps and wraps and wraps and should really be separated into a label + help text
+          </label>
+          <textarea placeholder='this is a sample of what you should enter'/></textarea>
+        </div>
+
+        <div class='usa-input'>
+          <label for='selects'>Select Menu</label>
+          <select name='selects'>
+            <option selected disabled>Select an option</option>
+            <option value='1'>One</option>
+            <option value='2'>Two</option>
+            <option value='3'>Three</option>
+            <option value='4'>Four</option>
+            <option value='5'>Five</option>
+          </select>
+        </div>
+
+        <div class='row row--form'>
+          <div class='col col--pad col--grow'>
+            <div class='usa-input'>
+              <fieldset class='usa-input__choices'>
+                <legend>Checkboxes</legend>
+                <input type='checkbox' id='checkbox-1' checked/>
+                <label for='checkbox-1'>Checkbox One</label>
+
+                <input type='checkbox' id='checkbox-2' />
+                <label for='checkbox-2'>Checkbox Two</label>
+
+                <input type='checkbox' id='checkbox-3' disabled />
+                <label for='checkbox-3'>Checkbox Three</label>
+              </fieldset>
+            </div>
+          </div>
+
+          <div class='col col--pad col--grow'>
+            <div class='usa-input'>
+              <fieldset class='usa-input__choices usa-input__choices--inline'>
+                <legend>Inline Checkboxes</legend>
+                <input type='checkbox' id='checkbox-4' checked/>
+                <label for='checkbox-4'>Checkbox Four</label>
+
+                <input type='checkbox' id='checkbox-5' />
+                <label for='checkbox-5'>Checkbox Five</label>
+
+                <input type='checkbox' id='checkbox-6' disabled />
+                <label for='checkbox-6'>Checkbox Six</label>
+              </fieldset>
+            </div>
+          </div>
+        </div>
+
+        <div class='row row--form'>
+          <div class='col col--grow col--pad'>
+            <div class='usa-input'>
+              <fieldset class='usa-input__choices'>
+                <legend>Radio Buttons</legend>
+
+                <input type='radio' name='radio' id='radio-1' />
+                <label for='radio-1'>Radio One</label>
+
+                <input type='radio' name='radio' id='radio-2' />
+                <label for='radio-2'>Radio Two</label>
+
+                <input type='radio' name='radio' id='radio-3' />
+                <label for='radio-3'>Radio Three</label>
+              </fieldset>
+            </div>
+          </div>
+
+          <div class='col col--grow col--pad'>
+            <div class='usa-input'>
+              <fieldset class='usa-input__choices usa-input__choices--inline'>
+                <legend>Radio Buttons</legend>
+
+                <input type='radio' name='radio-2' id='radio-4' />
+                <label for='radio-4'>Radio Four</label>
+
+                <input type='radio' name='radio-2' id='radio-5' />
+                <label for='radio-5'>Radio Five</label>
+
+                <input type='radio' name='radio-2' id='radio-6' />
+                <label for='radio-6'>Radio Six</label>
+              </fieldset>
+            </div>
+          </div>
+        </div>
+
+      </form>
     </div>
   </div>