From 34a1e454007a4071f97917b2f13d8a467fe421ab Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Thu, 19 Oct 2017 13:04:39 -0700
Subject: Add input group support for custom selects and custom files

Closes #24437, closes #22457
---
 docs/4.0/components/input-group.md | 93 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 92 insertions(+), 1 deletion(-)

(limited to 'docs/4.0')

diff --git a/docs/4.0/components/input-group.md b/docs/4.0/components/input-group.md
index 231adc906..251af2a01 100644
--- a/docs/4.0/components/input-group.md
+++ b/docs/4.0/components/input-group.md
@@ -106,7 +106,6 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
 </div>
 {% endexample %}
 
-
 ## Button addons
 
 Buttons in input groups must wrapped in a `.input-group-btn` for proper alignment and sizing. This is required due to default browser styles that cannot be overridden.
@@ -230,6 +229,98 @@ Buttons in input groups must wrapped in a `.input-group-btn` for proper alignmen
 </div>
 {% endexample %}
 
+## Custom forms
+
+Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.
+
+### Custom select
+
+{% example html %}
+<div class="input-group mb-3">
+  <span class="input-group-addon" id="">Options</span>
+  <select class="custom-select" id="">
+    <option selected>Choose...</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+</div>
+
+<div class="input-group mb-3">
+  <select class="custom-select" id="">
+    <option selected>Choose...</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <span class="input-group-addon" id="">Options</span>
+</div>
+
+<div class="input-group mb-3">
+  <span class="input-group-btn">
+    <button class="btn btn-secondary" type="button">Button</button>
+  </span>
+  <select class="custom-select" id="">
+    <option selected>Choose...</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+</div>
+
+<div class="input-group">
+  <select class="custom-select" id="">
+    <option selected>Choose...</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <span class="input-group-btn">
+    <button class="btn btn-secondary" type="button">Button</button>
+  </span>
+</div>
+{% endexample %}
+
+### Custom file input
+
+{% example html %}
+<div class="input-group mb-3">
+  <span class="input-group-addon" id="">Upload</span>
+  <label class="custom-file">
+    <input type="file" id="file" class="custom-file-input" required>
+    <span class="custom-file-control"></span>
+  </label>
+</div>
+
+<div class="input-group mb-3">
+  <label class="custom-file">
+    <input type="file" id="file" class="custom-file-input" required>
+    <span class="custom-file-control"></span>
+  </label>
+  <span class="input-group-addon" id="">Upload</span>
+</div>
+
+<div class="input-group mb-3">
+  <span class="input-group-btn">
+    <button class="btn btn-secondary" type="button">Button</button>
+  </span>
+  <label class="custom-file">
+    <input type="file" id="file" class="custom-file-input" required>
+    <span class="custom-file-control"></span>
+  </label>
+</div>
+
+<div class="input-group">
+  <label class="custom-file">
+    <input type="file" id="file" class="custom-file-input" required>
+    <span class="custom-file-control"></span>
+  </label>
+  <span class="input-group-btn">
+    <button class="btn btn-secondary" type="button">Button</button>
+  </span>
+</div>
+{% endexample %}
+
 ## Accessibility
 
 Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.
-- 
cgit v1.2.3


From 8f9e8569ae388ba90549da897f63a8688b328da8 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 22 Oct 2017 14:04:46 -0700
Subject: add ids, add for attributes, and fix dupe ids

---
 docs/4.0/components/input-group.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

(limited to 'docs/4.0')

diff --git a/docs/4.0/components/input-group.md b/docs/4.0/components/input-group.md
index 251af2a01..db8dc4b0c 100644
--- a/docs/4.0/components/input-group.md
+++ b/docs/4.0/components/input-group.md
@@ -237,8 +237,8 @@ Input groups include support for custom selects and custom file inputs. Browser
 
 {% example html %}
 <div class="input-group mb-3">
-  <span class="input-group-addon" id="">Options</span>
-  <select class="custom-select" id="">
+  <label class="input-group-addon" for="inputGroupSelect01">Options</label>
+  <select class="custom-select" id="inputGroupSelect01">
     <option selected>Choose...</option>
     <option value="1">One</option>
     <option value="2">Two</option>
@@ -247,20 +247,20 @@ Input groups include support for custom selects and custom file inputs. Browser
 </div>
 
 <div class="input-group mb-3">
-  <select class="custom-select" id="">
+  <select class="custom-select" id="inputGroupSelect02">
     <option selected>Choose...</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
   </select>
-  <span class="input-group-addon" id="">Options</span>
+  <label class="input-group-addon" for="inputGroupSelect02">Options</label>
 </div>
 
 <div class="input-group mb-3">
   <span class="input-group-btn">
     <button class="btn btn-secondary" type="button">Button</button>
   </span>
-  <select class="custom-select" id="">
+  <select class="custom-select" id="inputGroupSelect03">
     <option selected>Choose...</option>
     <option value="1">One</option>
     <option value="2">Two</option>
@@ -269,7 +269,7 @@ Input groups include support for custom selects and custom file inputs. Browser
 </div>
 
 <div class="input-group">
-  <select class="custom-select" id="">
+  <select class="custom-select" id="inputGroupSelect04">
     <option selected>Choose...</option>
     <option value="1">One</option>
     <option value="2">Two</option>
@@ -285,16 +285,16 @@ Input groups include support for custom selects and custom file inputs. Browser
 
 {% example html %}
 <div class="input-group mb-3">
-  <span class="input-group-addon" id="">Upload</span>
+  <span class="input-group-addon">Upload</span>
   <label class="custom-file">
-    <input type="file" id="file" class="custom-file-input" required>
+    <input type="file" id="inputGroupFile01" class="custom-file-input" required>
     <span class="custom-file-control"></span>
   </label>
 </div>
 
 <div class="input-group mb-3">
   <label class="custom-file">
-    <input type="file" id="file" class="custom-file-input" required>
+    <input type="file" id="inputGroupFile02" class="custom-file-input" required>
     <span class="custom-file-control"></span>
   </label>
   <span class="input-group-addon" id="">Upload</span>
@@ -305,14 +305,14 @@ Input groups include support for custom selects and custom file inputs. Browser
     <button class="btn btn-secondary" type="button">Button</button>
   </span>
   <label class="custom-file">
-    <input type="file" id="file" class="custom-file-input" required>
+    <input type="file" id="inputGroupFile03" class="custom-file-input" required>
     <span class="custom-file-control"></span>
   </label>
 </div>
 
 <div class="input-group">
   <label class="custom-file">
-    <input type="file" id="file" class="custom-file-input" required>
+    <input type="file" id="inputGroupFile04" class="custom-file-input" required>
     <span class="custom-file-control"></span>
   </label>
   <span class="input-group-btn">
-- 
cgit v1.2.3


From 2d0399e4ea940a91178635d08d201650101d76be Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 22 Oct 2017 19:39:32 -0700
Subject: clarify

---
 docs/4.0/components/input-group.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'docs/4.0')

diff --git a/docs/4.0/components/input-group.md b/docs/4.0/components/input-group.md
index db8dc4b0c..011a1edc7 100644
--- a/docs/4.0/components/input-group.md
+++ b/docs/4.0/components/input-group.md
@@ -1,11 +1,13 @@
 ---
 layout: docs
 title: Input group
-description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.
+description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
 group: components
 toc: true
 ---
 
+
+
 ## Basic example
 
 Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group** and `<label>`s must come outside the input group.
-- 
cgit v1.2.3