Add readonly state and help text #16

dwyl · Jun 2, 2017 · 1fa0530 · 1fa0530
1 parent dcc2700
commit 1fa0530
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/components/form.html b/components/form.html
@@ -269,4 +269,21 @@ <h4>Disable fieldsets</h4>
       </label>
     </div>
   </fieldset>
+
+  <h3>Read only state</h3>
+  <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+  <form class="w-100 mt2">
+    <input type="text" class="pa2 br2 b--black-20 bg-black-10 f6 w-100" placeholder="Readonly input here..." readonly>
+  </form>
+
+  <h3>Help text</h3>
+  <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+  <div class="mv3">
+    <label for="inputHelpBlock" class="fw7 f6">Email</label>
+    <input type="text" class="db w-100 pa2 mt2 br2 b--black-20 f6" id="inputHelpBlock" aria-describedby="helpBlock">
+    <p id="helpBlock" class="f6 black-60 mt3">
+      A block of help text that breaks onto a new line and may extend beyond
+      one line.
+    </p>
+  </div>
 </article>