diff options
1 files changed, 48 insertions, 0 deletions
| -rw-r--r-- | docs/src/contents/forms.pug | 48 |
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 |