diff --git a/docs/components/forms.md b/docs/components/forms.md index 0028c2b85fe243f7ba3ce54b146b0c2530e11dca..ef56a9e890ffcf034128c7940e3d3fb3793f334d 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -764,6 +764,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 b87429c1b0798f67ee90aa9dafb554d9e5a716ca..fde8295314a3b0c9840d8c4f6ac8a8652a5dd89b 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