From 09aefaa2afe05f438b99caa63bb888c62c40bf73 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 8 Feb 2016 23:21:32 -0800
Subject: [PATCH] Alternate fix to #17965: Updates to use the new class name
 and adds some basic docs for custom checkbox/radio validation

---
 docs/components/forms.md | 27 +++++++++++++++++++++++++++
 scss/mixins/_forms.scss  |  3 ++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 134bd88c19..6f95ecb3d8 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 b87429c1b0..fde8295314 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