Documents radio and checkbox validation states

References twbs#14010 fixing duped IDs fix ALL the duped IDs. make example id match actual id
zacechola · Jul 2, 2014 · afdc9c4 · afdc9c4
1 parent 4715e05
commit afdc9c4
Showing 1 changed file with 52 additions and 0 deletions.
diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
@@ -579,6 +579,58 @@ <h4>Icons, labels, and input groups</h4>
   <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>