add example of multiple add-ons to docs

9c3ba540 · Mark Otto · 23d47122 · 9c3ba540
Commit 9c3ba540 authored 9 years ago by Mark Otto
Hide whitespace changes
Inline Side-by-side

Showing

with 32 additions and 5 deletions
+32 -5
--- a/docs/components/input-group.md
+++ b/docs/components/input-group.md
@@ -37,6 +37,12 @@ Place one add-on or button on either side of an input. You may also place one on
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
 </div>
+<br>
+<div class="input-group">
+  <span class="input-group-addon">$</span>
+  <span class="input-group-addon">0.00</span>
+  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
+</div>
 {% endexample %}

 ## Sizing
@@ -53,11 +59,6 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
 </div>
-<br>
-<div class="input-group input-group-sm">
-  <span class="input-group-addon" id="sizing-addon3">@</span>
-  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
-</div>
 {% endexample %}

 ## Checkboxes and radio addons
@@ -85,6 +86,32 @@ Place any checkbox or radio option within an input group's addon instead of text
 </div>
 {% endexample %}

+## Multiple addons
+
+Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
+
+{% example html %}
+<div class="row">
+  <div class="col-lg-6">
+    <div class="input-group">
+      <span class="input-group-addon">
+        <input type="checkbox" aria-label="Checkbox for following text input">
+      </span>
+      <span class="input-group-addon">$</span>
+      <input type="text" class="form-control" aria-label="Text input with checkbox">
+    </div>
+  </div>
+  <div class="col-lg-6">
+    <div class="input-group">
+      <span class="input-group-addon">$</span>
+      <span class="input-group-addon">0.00</span>
+      <input type="text" class="form-control" aria-label="Text input with radio button">
+    </div>
+  </div>
+</div>
+{% endexample %}
+
+
 ## Button addons

 Buttons in input groups are a bit different and require one extra level of nesting. Instead of `.input-group-addon`, you'll need to use `.input-group-btn` to wrap the buttons. This is required due to default browser styles that cannot be overridden.