Form grid,

some more error states

scss/elements/_inputs.scss

@@ -41,10 +41,22 @@
     border-color: $state-color;
     border-width: $border-width;
   }
+
+  fieldset {
+    input[type='radio'] {
+      + label::before {
+        box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px $color-red;
+      }
+    }
+  }
 }
 
 .usa-input {
+  margin:  ($gap * 4) ($gap * 2) ($gap * 4) 0;
+
+  @includ media($medium-screen) {
     margin: ($gap * 4) 0;
+  }
 
   label {
     padding: 0 0 $gap 0;
@@ -80,6 +92,10 @@
     legend {
       padding: 0 0 $gap 0;
       @include h4;
+
+      .icon {
+        vertical-align: middle;
+      }
     }
 
     label {
@@ -150,3 +166,32 @@ select {
   }
 
 }
+
+
+// Form Grid
+.form-row {
+  margin: ($gap * 4) 0;
+
+  .form-col {
+    flex-grow: 1;
+
+    &:first-child .usa-input {
+      margin-top: 0;
+    }
+
+    &:last-child .usa-input {
+      margin-bottom: 0;
+    }
+  }
+
+  @include media($medium-screen) {
+    @include grid-row;
+    align-items: flex-start;
+
+    .form-col {
+      .usa-input {
+        margin: 0 ($gap * 4) 0 0;
+      }
+    }
+  }
+}

templates/styleguide.html.to

@@ -141,7 +141,7 @@
         </div>
 
         <div class='usa-input usa-input--error'>
-          <label for='basic-text'>
+          <label for='basic-text-2'>
             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.
@@ -153,15 +153,26 @@
         </div>
 
         <div class='usa-input usa-input--warning'>
-          <label for='basic-text'>
+          <label for='basic-text-3'>
             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'/>
+          <input id='basic-text-3' type='text' placeholder='this is a sample of what you should enter' aria-describedby='basic-text-3__errors'/>
-          <span id='basic-text-2__errors' class='usa-input__message'>Oh boy you really screwed up big time, didn't you!</span>
+          <span id='basic-text-3__errors' class='usa-input__message'>Oh boy you really screwed up big time, didn't you!</span>
+        </div>
+
+        <div class='usa-input usa-input--success'>
+          <label for='basic-text-4'>
+            Success 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('ok') %}
+          </label>
+          <input id='basic-text-4' type='text' placeholder='this is a sample of what you should enter'/>
         </div>
 
         <div class='usa-input'>
@@ -183,8 +194,8 @@
           </select>
         </div>
 
-        <div class='row row--form'>
+        <div class='form-row'>
-          <div class='col col--pad col--grow'>
+          <div class='form-col'>
             <div class='usa-input'>
               <fieldset class='usa-input__choices'>
                 <legend>Checkboxes</legend>
@@ -200,7 +211,7 @@
             </div>
           </div>
 
-          <div class='col col--pad col--grow'>
+          <div class='form-col'>
             <div class='usa-input'>
               <fieldset class='usa-input__choices usa-input__choices--inline'>
                 <legend>Inline Checkboxes</legend>
@@ -217,11 +228,11 @@
           </div>
         </div>
 
-        <div class='row row--form'>
+        <div class='form-row'>
-          <div class='col col--grow col--pad'>
+          <div class='form-col'>
-            <div class='usa-input'>
+            <div class='usa-input usa-input--error'>
-              <fieldset class='usa-input__choices'>
+              <fieldset class='usa-input__choices' >
-                <legend>Radio Buttons</legend>
+                <legend>Problem Radio Buttons {% module Icon('alert') %}</legend>
 
                 <input type='radio' name='radio' id='radio-1' />
                 <label for='radio-1'>Radio One</label>
@@ -231,11 +242,13 @@
 
                 <input type='radio' name='radio' id='radio-3' />
                 <label for='radio-3'>Radio Three</label>
+
+                <span class='usa-input__message'>This is an error</span>
               </fieldset>
             </div>
           </div>
 
-          <div class='col col--grow col--pad'>
+          <div class='form-col'>
             <div class='usa-input'>
               <fieldset class='usa-input__choices usa-input__choices--inline'>
                 <legend>Radio Buttons</legend>