Documents radio and checkbox validation states

References #14010

fixing duped IDs

fix ALL the duped IDs.

make example id match actual id

diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
index 9680c6c91030e18dc8dc453ee9e48dfe92db0328..c5d89c3219add54296e91e6ee61a932bba3500ee 100644 (file)
--- a/docs/_includes/css/forms.html
+++ b/docs/_includes/css/forms.html
@@ -579,6 +579,58 @@
   <input type="text" class="form-control" id="inputError2">
   <span class="glyphicon glyphicon-remove form-control-feedback"></span>
 </div>
+{% endhighlight %}
+
+  <h3>Checkboxes and radio buttons</h3>
+  <div class=bs-example>
+    <form role="form">
+      <div class="has-error">
+        <div class="radio">
+          <label class="checkbox">
+            <input type="checkbox" id="checkboxError" value="option1">
+            Option one is this and that&mdash;be sure to include why it's great
+          </label>
+        </div>
+      </div>
+      <div class="has-success">
+        <div class="radio">
+          <label>
+            <input type="radio" name="optionsRadios" id="radiosSuccess1" value="option1" checked>
+            Option one is this and that&mdash;be sure to include why it's great
+          </label>
+        </div>
+        <div class="radio">
+          <label>
+            <input type="radio" name="optionsRadios" id="radiosSuccess2" value="option2">
+            Option two can be something else and selecting it will deselect option one
+          </label>
+        </div>
+      </div>
+    </form>
+  </div>
+{% highlight html %}
+<div class="has-error">
+  <div class="radio">
+    <label class="checkbox">
+      <input type="checkbox" id="checkboxError" value="option1">
+      Option one is this and that&mdash;be sure to include why it's great
+    </label>
+  </div>
+</div>
+<div class="has-success">
+  <div class="radio">
+    <label>
+      <input type="radio" name="optionsRadios" id="radiosSuccess1" value="option1" checked>
+      Option one is this and that&mdash;be sure to include why it's great
+    </label>
+  </div>
+  <div class="radio">
+    <label>
+      <input type="radio" name="optionsRadios" id="radiosSuccess2" value="option2">
+      Option two can be something else and selecting it will deselect option one
+    </label>
+  </div>
+</div>
 {% endhighlight %}
 
   <h4>Optional icons in horizontal and inline forms</h4>