Add inline forms

1 files changed, 48 insertions, 0 deletions

diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug
index 838b9e4..e812aef 100644
--- a/docs/src/contents/forms.pug
+++ b/docs/src/contents/forms.pug
@@ -154,6 +154,54 @@ script.
 p
   | You can change checkbox to indeterminate state by setting the #[code indeterminate] property of input checkboxes to #[code true].
 
++docs-subheading('forms-inline', 'Inline forms')
+
+.docs-demo.columns
+  .column.col-6.col-xs-12
+    form
+      .form-group
+        label.form-radio.form-inline
+          input(type="radio" name="gender" checked="")
+          i.form-icon
+          |  Male
+        label.form-radio.form-inline
+          input(type="radio" name="gender")
+          i.form-icon
+          |  Female
+      .form-group
+        label.form-checkbox.form-inline
+          input(type="checkbox")
+          i.form-icon
+          |  Checkbox 1
+        label.form-checkbox.form-inline
+          input(type="checkbox" checked="")
+          i.form-icon
+          |  Checkbox 2
+
+p
+  | You can add the #[code form-inline] class to the form components to make them inline in one row.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <div class="form-group">
+        <label class="form-radio form-inline">
+          <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
+        </label>
+        <label class="form-radio form-inline">
+          <input type="radio" name="gender"><i class="form-icon"></i> Female
+        </label>
+      </div>
+
+      <div class="form-group">
+        <label class="form-checkbox form-inline">
+          <input type="checkbox"><i class="form-icon"></i> Checkbox 1
+        </label>
+        <label class="form-checkbox form-inline">
+          <input type="checkbox" checked=""><i class="form-icon"></i> Checkbox 2
+        </label>
+      </div>
+
 +docs-subheading('forms-horizontal', 'Horizontal forms')
 
 p