From a05f1d883e3ec4780ea064ad9119e38a8448bc25 Mon Sep 17 00:00:00 2001
From: Jesse Mandel <jmandel@alg.com>
Date: Fri, 5 Jan 2018 10:55:13 -0800
Subject: [PATCH 1/2] add validation feedback/tooltip support to
 form-check-inputs

---
 scss/mixins/_forms.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 627e0dc82c28..22906824212a 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -74,6 +74,11 @@
       ~ .form-check-label {
         color: $color;
       }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
     }
   }
 

From 20a251a597807ba9e423bafac5d1f531c80bedf5 Mon Sep 17 00:00:00 2001
From: Jesse Mandel <jmandel@alg.com>
Date: Fri, 5 Jan 2018 12:24:19 -0800
Subject: [PATCH 2/2] Added required checkbox example

---
 docs/4.0/components/forms.md | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 3830f5a9f16a..7dd9428f0663 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -776,6 +776,17 @@ When attempting to submit, you'll see the `:invalid` and `:valid` styles applied
       </div>
     </div>
   </div>
+  <div class="form-group">
+    <div class="form-check">
+      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
+      <label class="form-check-label" for="invalidCheck">
+        I agree
+      </label>
+      <div class="invalid-feedback">
+        You must agree
+      </div>
+    </div>
+  </div>
   <button class="btn btn-primary" type="submit">Submit form</button>
 </form>
 
@@ -842,6 +853,14 @@ While these feedback styles cannot be styled with CSS, you can still customize t
       <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
     </div>
   </div>
+  <div class="form-group">
+    <div class="form-check">
+      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
+      <label class="form-check-label" for="invalidCheck2">
+        I agree
+      </label>
+    </div>
+  </div>
   <button class="btn btn-primary" type="submit">Submit form</button>
 </form>
 {% endexample %}
@@ -903,7 +922,17 @@ We recommend using client side validation, but in case you require server side,
       </div>
     </div>
   </div>
-
+  <div class="form-group">
+    <div class="form-check">
+      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
+      <label class="form-check-label" for="invalidCheck3">
+        I agree
+      </label>
+      <div class="invalid-feedback">
+        You must agree
+      </div>
+    </div>
+  </div>
   <button class="btn btn-primary" type="submit">Submit form</button>
 </form>
 {% endexample %}