diff options
| -rw-r--r-- | docs/components/forms.md | 27 | ||||
| -rw-r--r-- | scss/mixins/_forms.scss | 3 |
2 files changed, 29 insertions, 1 deletions
diff --git a/docs/components/forms.md b/docs/components/forms.md index 134bd88c1..6f95ecb3d 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -762,6 +762,33 @@ Custom checkboxes and radios can also be disabled. Add the `disabled` boolean at </label> {% endexample %} +#### Validation states + +Add other states to your custom forms with our validation classes. + +{% example html %} +<div class="form-group has-success"> + <label class="custom-control custom-checkbox"> + <input type="checkbox" class="custom-control-input"> + <span class="custom-control-indicator"></span> + <span class="custom-control-description">Check this custom checkbox</span> + </label> +</div> +<div class="form-group has-warning"> + <label class="custom-control custom-checkbox"> + <input type="checkbox" class="custom-control-input"> + <span class="custom-control-indicator"></span> + <span class="custom-control-description">Check this custom checkbox</span> + </label> +</div> +<div class="form-group has-danger m-b-0"> + <label class="custom-control custom-checkbox"> + <input type="checkbox" class="custom-control-input"> + <span class="custom-control-indicator"></span> + <span class="custom-control-description">Check this custom checkbox</span> + </label> +</div> +{% endexample %} #### Stacked diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index b87429c1b..fde829531 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -14,7 +14,8 @@ &.radio label, &.checkbox label, &.radio-inline label, - &.checkbox-inline label { + &.checkbox-inline label, + .custom-control { color: $color; } // Set the border and box shadow on specific inputs to match |