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')

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