From 07d0be92245ac93193b0f764c50f953a679acbb3 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 15 Sep 2020 20:31:56 -0700
Subject: [PATCH 01/10] Rewrite input groups

---
 scss/forms/_input-group.scss               |  34 +-
 site/content/docs/5.0/forms/input-group.md | 383 +++++++++------------
 site/content/docs/5.0/migration.md         |  11 +-
 3 files changed, 194 insertions(+), 234 deletions(-)

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 7a9a14dd7be3..22d3c5fd897c 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -2,7 +2,9 @@
 // Base styles
 //
 
-.input-group {
+// .input-group,
+.input-group-start,
+.input-group-end {
   position: relative;
   display: flex;
   flex-wrap: wrap; // For form validation feedback
@@ -128,13 +130,31 @@
 
 // stylelint-disable-next-line no-duplicate-selectors
 .input-group {
-  > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
-  > .dropdown-toggle:nth-last-child(n + 3) {
-    @include border-right-radius(0);
+  &-start {
+    > .input-group-text,
+    > .btn {
+      @include border-right-radius(0);
+    }
+
+    > .form-control,
+    > .form-select,
+    > .form-file {
+      margin-left: -$input-border-width;
+      @include border-left-radius(0);
+    }
   }
 
-  > :not(:first-child):not(.dropdown-menu) {
-    margin-left: -$input-border-width;
-    @include border-left-radius(0);
+  &-end {
+    > .input-group-text,
+    > .btn {
+      margin-left: -$input-border-width;
+      @include border-left-radius(0);
+    }
+
+    > .form-control,
+    > .form-select,
+    > .form-file {
+      @include border-right-radius(0);
+    }
   }
 }
diff --git a/site/content/docs/5.0/forms/input-group.md b/site/content/docs/5.0/forms/input-group.md
index 599fdbacde1e..dabc2151e86c 100644
--- a/site/content/docs/5.0/forms/input-group.md
+++ b/site/content/docs/5.0/forms/input-group.md
@@ -1,264 +1,150 @@
 ---
 layout: docs
 title: Input group
-description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
+description: Extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
 group: forms
 toc: true
 ---
 
-## Basic example
+## Overview
 
-Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place `<label>`s outside the input group.
+In an effort to streamline our components and still support form validation styles, input groups have been drastically simplified in Bootstrap 5. We no longer support multiple addons, multiple buttons, multiple form controls, dropdowns, and segmented button dropdowns. If you find yourself needing these, we suggest using standard form controls, buttons, and dropdowns in an inline form layout.
 
-{{< example >}}
-<div class="input-group mb-3">
-  <span class="input-group-text" id="basic-addon1">@</span>
-  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
-</div>
+With v5, `.input-group` has been replaced by direction-specific classes `.input-group-start` and `.input-group-end`. The naming scheme here pulls from CSS's flex box and logical properties. For example, instead of _left_, we use _start_.
 
-<div class="input-group mb-3">
-  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
-  <span class="input-group-text" id="basic-addon2">@example.com</span>
-</div>
+Place one add-on or button on either side of an input. Remember to place `<label>`s outside the input group.
 
-<label for="basic-url" class="form-label">Your vanity URL</label>
-<div class="input-group mb-3">
-  <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
-  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
+{{< example >}}
+<div class="input-group-start mb-3">
+  <span class="input-group-text" id="inputGroupStart01">@</span>
+  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="inputGroupStart01">
 </div>
 
-<div class="input-group mb-3">
-  <span class="input-group-text">$</span>
-  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
-  <span class="input-group-text">.00</span>
-</div>
-
-<div class="input-group">
-  <span class="input-group-text">With textarea</span>
-  <textarea class="form-control" aria-label="With textarea"></textarea>
+<div class="input-group-end">
+  <input type="text" class="form-control" placeholder="100" aria-label="Amount" aria-describedby="inputGroupEnd01">
+  <span class="input-group-text" id="inputGroupEnd01">.00</span>
 </div>
 {{< /example >}}
 
-## Wrapping
+## Supported configurations
 
-Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.
+As mentioned, there are significantly fewer supported options for input groups in v5. To start, here are the supported form controls:
 
-{{< example >}}
-<div class="input-group flex-nowrap">
-  <span class="input-group-text" id="addon-wrapping">@</span>
-  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
-</div>
-{{< /example >}}
+- `.form-control` (`<input>` and `<textarea>`)
+- `.form-select` (without `multiple` or `size`)
+- `.form-file`
 
-## Sizing
+Configurations that are supported include:
 
-Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
+- Text or button before a form control
+- Text or button after a form control
 
-**Sizing on the individual input group elements isn't supported.**
+See how these form controls come together with text or button addons in our supported configurations below.
 
-{{< example >}}
-<div class="input-group input-group-sm mb-3">
-  <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
-  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
-</div>
+### Text addons
 
-<div class="input-group mb-3">
-  <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
-  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
+Use `.input-group-text` as starting and ending addons with our supported form controls.
+
+{{< example >}}
+<div class="input-group-start mb-3">
+  <span class="input-group-text" id="inputGroupStart01">@</span>
+  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="inputGroupStart01">
 </div>
 
-<div class="input-group input-group-lg">
-  <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
-  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
+<div class="input-group-end">
+  <input type="text" class="form-control" placeholder="100" aria-label="Amount" aria-describedby="inputGroupEnd01">
+  <span class="input-group-text" id="inputGroupEnd01">.00</span>
 </div>
 {{< /example >}}
 
-## Checkboxes and radios
-
-Place any checkbox or radio option within an input group's addon instead of text.
-
 {{< example >}}
-<div class="input-group mb-3">
-  <div class="input-group-text">
-    <input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input">
-  </div>
-  <input type="text" class="form-control" aria-label="Text input with checkbox">
+<div class="input-group-start mb-3">
+  <span class="input-group-text">With textarea</span>
+  <textarea class="form-control" aria-label="With textarea"></textarea>
 </div>
 
-<div class="input-group">
-  <div class="input-group-text">
-    <input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input">
-  </div>
-  <input type="text" class="form-control" aria-label="Text input with radio button">
+<div class="input-group-end">
+  <textarea class="form-control" aria-label="With textarea"></textarea>
+  <span class="input-group-text">With textarea</span>
 </div>
 {{< /example >}}
 
-## Multiple inputs
-
-While multiple `<input>`s are supported visually, validation styles are only available for input groups with a single `<input>`.
-
 {{< example >}}
-<div class="input-group">
-  <span class="input-group-text">First and last name</span>
-  <input type="text" aria-label="First name" class="form-control">
-  <input type="text" aria-label="Last name" class="form-control">
+<div class="input-group-start mb-3">
+  <label class="input-group-text" for="inputGroupSelect01">Options</label>
+  <select class="form-select" id="inputGroupSelect01">
+    <option selected>Choose...</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
 </div>
-{{< /example >}}
-
-## Multiple addons
 
-Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
+<div class="input-group-end">
+  <select class="form-select" id="inputGroupSelect02">
+    <option selected>Choose...</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <label class="input-group-text" for="inputGroupSelect02">Options</label>
+</div>
+{{< /example >}}
 
 {{< example >}}
-<div class="input-group mb-3">
-  <span class="input-group-text">$</span>
-  <span class="input-group-text">0.00</span>
-  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
+<div class="input-group-start mb-3">
+  <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
+  <div class="form-file">
+    <input type="file" class="form-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
+    <label class="form-file-label" for="inputGroupFile01">
+      <span class="form-file-text">Choose file...</span>
+      <span class="form-file-button">Browse</span>
+    </label>
+  </div>
 </div>
 
-<div class="input-group">
-  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
-  <span class="input-group-text">$</span>
-  <span class="input-group-text">0.00</span>
+<div class="input-group-end">
+  <div class="form-file">
+    <input type="file" class="form-file-input" id="inputGroupFile02">
+    <label class="form-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">
+      <span class="form-file-text">Choose file...</span>
+      <span class="form-file-button">Browse</span>
+    </label>
+  </div>
+  <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
 </div>
 {{< /example >}}
 
-## Button addons
+### Button addons
+
+Use `.btn`s as starting and ending addons with our supported form controls.
 
 {{< example >}}
-<div class="input-group mb-3">
+<div class="input-group-start mb-3">
   <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
   <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
 </div>
 
-<div class="input-group mb-3">
+<div class="input-group-end">
   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
   <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
 </div>
-
-<div class="input-group mb-3">
-  <button class="btn btn-outline-secondary" type="button">Button</button>
-  <button class="btn btn-outline-secondary" type="button">Button</button>
-  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
-</div>
-
-<div class="input-group">
-  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
-  <button class="btn btn-outline-secondary" type="button">Button</button>
-  <button class="btn btn-outline-secondary" type="button">Button</button>
-</div>
-{{< /example >}}
-
-## Buttons with dropdowns
-
-{{< example >}}
-<div class="input-group mb-3">
-  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
-  <ul class="dropdown-menu">
-    <li><a class="dropdown-item" href="#">Action</a></li>
-    <li><a class="dropdown-item" href="#">Another action</a></li>
-    <li><a class="dropdown-item" href="#">Something else here</a></li>
-    <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item" href="#">Separated link</a></li>
-  </ul>
-  <input type="text" class="form-control" aria-label="Text input with dropdown button">
-</div>
-
-<div class="input-group mb-3">
-  <input type="text" class="form-control" aria-label="Text input with dropdown button">
-  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
-  <ul class="dropdown-menu dropdown-menu-right">
-    <li><a class="dropdown-item" href="#">Action</a></li>
-    <li><a class="dropdown-item" href="#">Another action</a></li>
-    <li><a class="dropdown-item" href="#">Something else here</a></li>
-    <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item" href="#">Separated link</a></li>
-  </ul>
-</div>
-
-<div class="input-group">
-  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
-  <ul class="dropdown-menu">
-    <li><a class="dropdown-item" href="#">Action before</a></li>
-    <li><a class="dropdown-item" href="#">Another action before</a></li>
-    <li><a class="dropdown-item" href="#">Something else here</a></li>
-    <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item" href="#">Separated link</a></li>
-  </ul>
-  <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
-  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
-  <ul class="dropdown-menu dropdown-menu-right">
-    <li><a class="dropdown-item" href="#">Action</a></li>
-    <li><a class="dropdown-item" href="#">Another action</a></li>
-    <li><a class="dropdown-item" href="#">Something else here</a></li>
-    <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item" href="#">Separated link</a></li>
-  </ul>
-</div>
 {{< /example >}}
 
-## Segmented buttons
-
 {{< example >}}
-<div class="input-group mb-3">
-  <button type="button" class="btn btn-outline-secondary">Action</button>
-  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-    <span class="visually-hidden">Toggle Dropdown</span>
-  </button>
-  <ul class="dropdown-menu">
-    <li><a class="dropdown-item" href="#">Action</a></li>
-    <li><a class="dropdown-item" href="#">Another action</a></li>
-    <li><a class="dropdown-item" href="#">Something else here</a></li>
-    <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item" href="#">Separated link</a></li>
-  </ul>
-  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
+<div class="input-group-start mb-3">
+  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
+  <textarea class="form-control" aria-label="With textarea"></textarea>
 </div>
 
-<div class="input-group">
-  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
-  <button type="button" class="btn btn-outline-secondary">Action</button>
-  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-    <span class="visually-hidden">Toggle Dropdown</span>
-  </button>
-  <ul class="dropdown-menu dropdown-menu-right">
-    <li><a class="dropdown-item" href="#">Action</a></li>
-    <li><a class="dropdown-item" href="#">Another action</a></li>
-    <li><a class="dropdown-item" href="#">Something else here</a></li>
-    <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item" href="#">Separated link</a></li>
-  </ul>
+<div class="input-group-end">
+  <textarea class="form-control" aria-label="With textarea"></textarea>
+  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
 </div>
 {{< /example >}}
 
-## Custom forms
-
-Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.
-
-### Custom select
-
 {{< example >}}
-<div class="input-group mb-3">
-  <label class="input-group-text" for="inputGroupSelect01">Options</label>
-  <select class="form-select" id="inputGroupSelect01">
-    <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="form-select" id="inputGroupSelect02">
-    <option selected>Choose...</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-  </select>
-  <label class="input-group-text" for="inputGroupSelect02">Options</label>
-</div>
-
-<div class="input-group mb-3">
+<div class="input-group-start mb-3">
   <button class="btn btn-outline-secondary" type="button">Button</button>
   <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
     <option selected>Choose...</option>
@@ -268,7 +154,7 @@ Input groups include support for custom selects and custom file inputs. Browser
   </select>
 </div>
 
-<div class="input-group">
+<div class="input-group-end">
   <select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
     <option selected>Choose...</option>
     <option value="1">One</option>
@@ -279,32 +165,8 @@ Input groups include support for custom selects and custom file inputs. Browser
 </div>
 {{< /example >}}
 
-### Custom file input
-
 {{< example >}}
-<div class="input-group mb-3">
-  <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
-  <div class="form-file">
-    <input type="file" class="form-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
-    <label class="form-file-label" for="inputGroupFile01">
-      <span class="form-file-text">Choose file...</span>
-      <span class="form-file-button">Browse</span>
-    </label>
-  </div>
-</div>
-
-<div class="input-group mb-3">
-  <div class="form-file">
-    <input type="file" class="form-file-input" id="inputGroupFile02">
-    <label class="form-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">
-      <span class="form-file-text">Choose file...</span>
-      <span class="form-file-button">Browse</span>
-    </label>
-  </div>
-  <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
-</div>
-
-<div class="input-group mb-3">
+<div class="input-group-start mb-3">
   <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
   <div class="form-file">
     <input type="file" class="form-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
@@ -315,7 +177,7 @@ Input groups include support for custom selects and custom file inputs. Browser
   </div>
 </div>
 
-<div class="input-group">
+<div class="input-group-end">
   <div class="form-file">
     <input type="file" class="form-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
     <label class="form-file-label" for="inputGroupFile04">
@@ -326,3 +188,72 @@ Input groups include support for custom selects and custom file inputs. Browser
   <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
 </div>
 {{< /example >}}
+
+## Wrapping
+
+Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.
+
+{{< example >}}
+<div class="input-group-start flex-nowrap">
+  <span class="input-group-text" id="addon-wrapping">@</span>
+  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
+</div>
+{{< /example >}}
+
+## Sizing
+
+Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
+
+**Sizing on the individual input group elements isn't supported.**
+
+{{< example >}}
+<div class="input-group-start input-group-sm mb-3">
+  <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
+  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
+</div>
+
+<div class="input-group-start mb-3">
+  <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
+  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
+</div>
+
+<div class="input-group-start input-group-lg">
+  <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
+  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
+</div>
+{{< /example >}}
+
+## Checkboxes and radios
+
+While `.input-group-text` is primarily for adding on text, you can also place any checkbox or radio option within instead of text.
+
+{{< example >}}
+<div class="input-group-start mb-3">
+  <div class="input-group-text">
+    <input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input">
+  </div>
+  <input type="text" class="form-control" aria-label="Text input with checkbox">
+</div>
+
+<div class="input-group-start">
+  <div class="input-group-text">
+    <input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input">
+  </div>
+  <input type="text" class="form-control" aria-label="Text input with radio button">
+</div>
+{{< /example >}}
+
+## Form validation
+
+With the rewritten input group in v5, form validation is supported without v4's longstanding rounded corner bug. [See the form validation page]({{< docsref "/forms/validation" >}}) for more information.
+
+{{< example >}}
+<label for="validationCustomUsername" class="form-label">Username</label>
+<div class="input-group-start">
+  <span class="input-group-text" id="inputGroupPrepend">@</span>
+  <input type="text" class="form-control is-invalid" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
+  <div class="invalid-feedback">
+    Please choose a username.
+  </div>
+</div>
+{{< /example >}}
diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index 6e5734854b2c..f86ba3d76fc2 100644
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -257,9 +257,18 @@ Changes to Reboot, typography, tables, and more.
 - Dropped `.form-row` for the more flexible grid gutters.
 - Dropped `.form-inline` for the more flexible grid.
 - Dropped support for `.form-control-plaintext` inside `.input-group`s.
-- Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups.
 - Form labels now require the `.form-label` class. Sass variables are now available to style form labels to your needs. [See #30476](https://github.com/twbs/bootstrap/pull/30476)
 
+#### Input groups
+
+- Drastically reduced supported options, dropping support for:
+  - Addons on both sides
+  - Dropdowns and button groups as addons
+  - Multiple text and button addons
+  - Multiple form controls
+- Replaced `.input-group` with `.input-group-start` and `.input-group-end`. Use one of the two classes depending on where you want your text or button addon.
+- Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups.
+
 ### Components
 
 - Unified `padding` values for alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, and tooltips to be based on our `$spacer` variable. [See #30564](https://github.com/twbs/bootstrap/pull/30564).

From d7f5dbb8971da3d021bf431d6d50ebf9ba2f0db4 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 15 Sep 2020 20:43:18 -0700
Subject: [PATCH 02/10] Update instances of input groups to new class names

---
 .../docs/5.0/components/button-group.md       |  4 ++--
 site/content/docs/5.0/components/navbar.md    |  2 +-
 site/content/docs/5.0/forms/layout.md         |  6 ++---
 site/content/docs/5.0/forms/validation.md     | 22 ++++++++++++++-----
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/site/content/docs/5.0/components/button-group.md b/site/content/docs/5.0/components/button-group.md
index 7a5992bbc73f..3e740d631510 100644
--- a/site/content/docs/5.0/components/button-group.md
+++ b/site/content/docs/5.0/components/button-group.md
@@ -119,7 +119,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
     <button type="button" class="btn btn-outline-secondary">3</button>
     <button type="button" class="btn btn-outline-secondary">4</button>
   </div>
-  <div class="input-group">
+  <div class="input-group-start">
     <div class="input-group-text" id="btnGroupAddon">@</div>
     <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
   </div>
@@ -132,7 +132,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
     <button type="button" class="btn btn-outline-secondary">3</button>
     <button type="button" class="btn btn-outline-secondary">4</button>
   </div>
-  <div class="input-group">
+  <div class="input-group-start">
     <div class="input-group-text" id="btnGroupAddon2">@</div>
     <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
   </div>
diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md
index 2bc21533bdd2..cd84de093204 100644
--- a/site/content/docs/5.0/components/navbar.md
+++ b/site/content/docs/5.0/components/navbar.md
@@ -248,7 +248,7 @@ Input groups work, too. If your navbar is an entire form, or mostly form, you ca
 {{< example >}}
 <nav class="navbar navbar-light bg-light">
   <form class="container-fluid">
-    <div class="input-group">
+    <div class="input-group-start">
       <span class="input-group-text" id="basic-addon1">@</span>
       <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
     </div>
diff --git a/site/content/docs/5.0/forms/layout.md b/site/content/docs/5.0/forms/layout.md
index f0fc0b582f92..dba8bad68241 100644
--- a/site/content/docs/5.0/forms/layout.md
+++ b/site/content/docs/5.0/forms/layout.md
@@ -224,7 +224,7 @@ The example below uses a flexbox utility to vertically center the contents and c
   </div>
   <div class="col-auto">
     <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
-    <div class="input-group">
+    <div class="input-group-start">
       <div class="input-group-text">@</div>
       <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
     </div>
@@ -262,7 +262,7 @@ You can then remix that once again with size-specific column classes.
   </div>
   <div class="col-sm-3">
     <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
-    <div class="input-group">
+    <div class="input-group-start">
       <div class="input-group-text">@</div>
       <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
     </div>
@@ -298,7 +298,7 @@ Use the `.col-auto` class to create horizontal layouts. By adding [gutter modifi
 <form class="row row-cols-lg-auto g-3 align-items-center">
   <div class="col-12">
     <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
-    <div class="input-group">
+    <div class="input-group-start">
       <div class="input-group-text">@</div>
       <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
     </div>
diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md
index 65b86520311d..a6059a873480 100644
--- a/site/content/docs/5.0/forms/validation.md
+++ b/site/content/docs/5.0/forms/validation.md
@@ -52,7 +52,7 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
   </div>
   <div class="col-md-4">
     <label for="validationCustomUsername" class="form-label">Username</label>
-    <div class="input-group">
+    <div class="input-group-start">
       <span class="input-group-text" id="inputGroupPrepend">@</span>
       <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
       <div class="invalid-feedback">
@@ -125,7 +125,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t
   </div>
   <div class="col-md-4">
     <label for="validationDefaultUsername" class="form-label">Username</label>
-    <div class="input-group">
+    <div class="input-group-start">
       <span class="input-group-text" id="inputGroupPrepend2">@</span>
       <input type="text" class="form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
     </div>
@@ -183,7 +183,7 @@ For invalid fields, ensure that the invalid feedback/error message is associated
   </div>
   <div class="col-md-4">
     <label for="validationServerUsername" class="form-label">Username</label>
-    <div class="input-group">
+    <div class="input-group-start">
       <span class="input-group-text" id="inputGroupPrepend3">@</span>
       <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
       <div id="validationServerUsernameFeedback" class="invalid-feedback">
@@ -239,7 +239,8 @@ Validation styles are available for the following form controls and components:
 - `<input>`s and `<textarea>`s with `.form-control` (including up to one `.form-control` in input groups)
 - `<select>`s with `.form-select`
 - `.form-check`s
-- `.form-file`
+- `.form-file`s
+- Input groups (both `.input-group-start` and `.input-group-end`)
 
 {{< example >}}
 <form class="was-validated">
@@ -286,6 +287,17 @@ Validation styles are available for the following form controls and components:
     <div class="invalid-feedback">Example invalid form file feedback</div>
   </div>
 
+  <div class="mb-3">
+    <label for="validationInputGroup" class="form-label">Username</label>
+    <div class="input-group-end">
+      <span class="input-group-text" id="validationInputGroupAddon">@</span>
+      <input type="text" class="form-control is-invalid" id="validationInputGroup" aria-describedby="validationInputGroupAddon" required>
+      <div class="invalid-feedback">
+        Please choose a username.
+      </div>
+    </div>
+  </div>
+
   <div class="mb-3">
     <button class="btn btn-primary" type="submit" disabled>Submit form</button>
   </div>
@@ -314,7 +326,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
   </div>
   <div class="col-md-4 position-relative">
     <label for="validationTooltipUsername" class="form-label">Username</label>
-    <div class="input-group">
+    <div class="input-group-start">
       <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
       <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
       <div class="invalid-tooltip">

From 29bf97a3c283b7c391a8958877cecf0634f2c0a9 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 15 Sep 2020 20:53:37 -0700
Subject: [PATCH 03/10] simplify selector

---
 scss/forms/_input-group.scss | 44 +++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 22d3c5fd897c..44701abd96f4 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -129,32 +129,30 @@
 // with the `.input-group >` part, but without it, we cannot override the sizing.
 
 // stylelint-disable-next-line no-duplicate-selectors
-.input-group {
-  &-start {
-    > .input-group-text,
-    > .btn {
-      @include border-right-radius(0);
-    }
+.input-group-start {
+  > .input-group-text,
+  > .btn {
+    @include border-right-radius(0);
+  }
 
-    > .form-control,
-    > .form-select,
-    > .form-file {
-      margin-left: -$input-border-width;
-      @include border-left-radius(0);
-    }
+  > .form-control,
+  > .form-select,
+  > .form-file {
+    margin-left: -$input-border-width;
+    @include border-left-radius(0);
   }
+}
 
-  &-end {
-    > .input-group-text,
-    > .btn {
-      margin-left: -$input-border-width;
-      @include border-left-radius(0);
-    }
+.input-group-end {
+  > .input-group-text,
+  > .btn {
+    margin-left: -$input-border-width;
+    @include border-left-radius(0);
+  }
 
-    > .form-control,
-    > .form-select,
-    > .form-file {
-      @include border-right-radius(0);
-    }
+  > .form-control,
+  > .form-select,
+  > .form-file {
+    @include border-right-radius(0);
   }
 }

From e0f3cc8dbb00158e1ef39df92a9c738ff7c81a9a Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Wed, 16 Sep 2020 20:21:15 +0300
Subject: [PATCH 04/10] Update input-group.md

---
 site/content/docs/5.0/forms/input-group.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/content/docs/5.0/forms/input-group.md b/site/content/docs/5.0/forms/input-group.md
index dabc2151e86c..7263114f03a5 100644
--- a/site/content/docs/5.0/forms/input-group.md
+++ b/site/content/docs/5.0/forms/input-group.md
@@ -47,13 +47,13 @@ Use `.input-group-text` as starting and ending addons with our supported form co
 
 {{< example >}}
 <div class="input-group-start mb-3">
-  <span class="input-group-text" id="inputGroupStart01">@</span>
-  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="inputGroupStart01">
+  <span class="input-group-text" id="inputGroupStart02">@</span>
+  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="inputGroupStart02">
 </div>
 
 <div class="input-group-end">
-  <input type="text" class="form-control" placeholder="100" aria-label="Amount" aria-describedby="inputGroupEnd01">
-  <span class="input-group-text" id="inputGroupEnd01">.00</span>
+  <input type="text" class="form-control" placeholder="100" aria-label="Amount" aria-describedby="inputGroupEnd02">
+  <span class="input-group-text" id="inputGroupEnd02">.00</span>
 </div>
 {{< /example >}}
 

From 21c89eae02c6c8dc6a30574bacb03fa13f499c25 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 16 Sep 2020 13:49:58 -0700
Subject: [PATCH 05/10] Remove commented out selector

---
 scss/forms/_input-group.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 44701abd96f4..a51edceeb6dd 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -2,7 +2,6 @@
 // Base styles
 //
 
-// .input-group,
 .input-group-start,
 .input-group-end {
   position: relative;

From b775a74a7b09e07acd5ecf020c9e007e624d3d25 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 16 Sep 2020 14:25:01 -0700
Subject: [PATCH 06/10] Update form validation examples to include
 aria-describedby and ids

---
 site/content/docs/5.0/forms/validation.md | 118 ++++++++++++----------
 1 file changed, 65 insertions(+), 53 deletions(-)

diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md
index a6059a873480..c59bcecf1ee2 100644
--- a/site/content/docs/5.0/forms/validation.md
+++ b/site/content/docs/5.0/forms/validation.md
@@ -21,6 +21,10 @@ Here's how form validation works with Bootstrap:
 - Bootstrap scopes the `:invalid` and `:valid` styles to parent `.was-validated` class, usually applied to the `<form>`. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
 - To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the `.was-validated` class from the `<form>` again after submission.
 - As a fallback, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for [server-side validation](#server-side). They do not require a `.was-validated` parent class.
+- Proper ARIA attributes should always be used to programmatically relate form validation feedback messages with their associated form controls.
+
+There are some limitations and browser considerations to be aware of when using form validation features:
+
 - Due to constraints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript.
 - All modern browsers support the [constraint validation API](https://www.w3.org/TR/html5/sec-forms.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls.
 - Feedback messages may utilize the [browser defaults](#browser-defaults) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.
@@ -38,15 +42,15 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
 <form class="row g-3 needs-validation" novalidate>
   <div class="col-md-4">
     <label for="validationCustom01" class="form-label">First name</label>
-    <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
-    <div class="valid-feedback">
+    <input type="text" class="form-control" id="validationCustom01" value="Mark" aria-describedby="validationCustomFeedback01" required>
+    <div class="valid-feedback" id="validationCustomFeedback01">
       Looks good!
     </div>
   </div>
   <div class="col-md-4">
     <label for="validationCustom02" class="form-label">Last name</label>
-    <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
-    <div class="valid-feedback">
+    <input type="text" class="form-control" id="validationCustom02" value="Otto" aria-describedby="validationCustomFeedback02" required>
+    <div class="valid-feedback" id="validationCustomFeedback02">
       Looks good!
     </div>
   </div>
@@ -54,43 +58,43 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
     <label for="validationCustomUsername" class="form-label">Username</label>
     <div class="input-group-start">
       <span class="input-group-text" id="inputGroupPrepend">@</span>
-      <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
-      <div class="invalid-feedback">
+      <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend validationCustomFeedback03" required>
+      <div class="invalid-feedback" id="validationCustomFeedback03">
         Please choose a username.
       </div>
     </div>
   </div>
   <div class="col-md-6">
     <label for="validationCustom03" class="form-label">City</label>
-    <input type="text" class="form-control" id="validationCustom03" required>
-    <div class="invalid-feedback">
+    <input type="text" class="form-control" id="validationCustom03" aria-describedby="validationCustomFeedback04" required>
+    <div class="invalid-feedback" id="validationCustomFeedback04">
       Please provide a valid city.
     </div>
   </div>
   <div class="col-md-3">
     <label for="validationCustom04" class="form-label">State</label>
-    <select class="form-select" id="validationCustom04" required>
+    <select class="form-select" id="validationCustom04" aria-describedby="validationCustomFeedback05" required>
       <option selected disabled value="">Choose...</option>
       <option>...</option>
     </select>
-    <div class="invalid-feedback">
+    <div class="invalid-feedback" id="validationCustomFeedback05">
       Please select a valid state.
     </div>
   </div>
   <div class="col-md-3">
     <label for="validationCustom05" class="form-label">Zip</label>
-    <input type="text" class="form-control" id="validationCustom05" required>
-    <div class="invalid-feedback">
+    <input type="text" class="form-control" id="validationCustom05" aria-describedby="validationCustomFeedback06" required>
+    <div class="invalid-feedback" id="validationCustomFeedback06">
       Please provide a valid zip.
     </div>
   </div>
   <div class="col-12">
     <div class="form-check">
-      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
+      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" aria-describedby="validationCustomFeedback07" required>
       <label class="form-check-label" for="invalidCheck">
         Agree to terms and conditions
       </label>
-      <div class="invalid-feedback">
+      <div class="invalid-feedback" id="validationCustomFeedback07">
         You must agree before submitting.
       </div>
     </div>
@@ -169,15 +173,15 @@ For invalid fields, ensure that the invalid feedback/error message is associated
 <form class="row g-3">
   <div class="col-md-4">
     <label for="validationServer01" class="form-label">First name</label>
-    <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
-    <div class="valid-feedback">
+    <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required aria-describedby="validationServerFeedback01">
+    <div class="valid-feedback" id="validationServerFeedback01">
       Looks good!
     </div>
   </div>
   <div class="col-md-4">
     <label for="validationServer02" class="form-label">Last name</label>
-    <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
-    <div class="valid-feedback">
+    <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required aria-describedby="validationServerFeedback02">
+    <div class="valid-feedback" id="validationServerFeedback02">
       Looks good!
     </div>
   </div>
@@ -185,43 +189,43 @@ For invalid fields, ensure that the invalid feedback/error message is associated
     <label for="validationServerUsername" class="form-label">Username</label>
     <div class="input-group-start">
       <span class="input-group-text" id="inputGroupPrepend3">@</span>
-      <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
-      <div id="validationServerUsernameFeedback" class="invalid-feedback">
+      <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerFeedback03" required>
+      <div class="invalid-feedback" id="validationServerFeedback03">
         Please choose a username.
       </div>
     </div>
   </div>
   <div class="col-md-6">
     <label for="validationServer03" class="form-label">City</label>
-    <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
-    <div id="validationServer03Feedback" class="invalid-feedback">
+    <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServerFeedback04" required>
+    <div class="invalid-feedback" id="validationServerFeedback04">
       Please provide a valid city.
     </div>
   </div>
   <div class="col-md-3">
     <label for="validationServer04" class="form-label">State</label>
-    <select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
+    <select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServerFeedback05" required>
       <option selected disabled value="">Choose...</option>
       <option>...</option>
     </select>
-    <div id="validationServer04Feedback" class="invalid-feedback">
+    <div class="invalid-feedback" id="validationServerFeedback05">
       Please select a valid state.
     </div>
   </div>
   <div class="col-md-3">
     <label for="validationServer05" class="form-label">Zip</label>
-    <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
-    <div id="validationServer05Feedback" class="invalid-feedback">
+    <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServerFeedback06" required>
+    <div class="invalid-feedback" id="validationServerFeedback06">
       Please provide a valid zip.
     </div>
   </div>
   <div class="col-12">
     <div class="form-check">
-      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
+      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="validationServerFeedback07" required>
       <label class="form-check-label" for="invalidCheck3">
         Agree to terms and conditions
       </label>
-      <div id="invalidCheck3Feedback" class="invalid-feedback">
+      <div class="invalid-feedback" id="validationServerFeedback07">
         You must agree before submitting.
       </div>
     </div>
@@ -246,53 +250,61 @@ Validation styles are available for the following form controls and components:
 <form class="was-validated">
   <div class="mb-3">
     <label for="validationTextarea" class="form-label">Textarea</label>
-    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
-    <div class="invalid-feedback">
+    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" aria-describedby="supportedElements01" required></textarea>
+    <div class="invalid-feedback" id="supportedElements01">
       Please enter a message in the textarea.
     </div>
   </div>
 
   <div class="form-check mb-3">
-    <input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
+    <input type="checkbox" class="form-check-input" id="validationFormCheck1" aria-describedby="supportedElements02" required>
     <label class="form-check-label" for="validationFormCheck1">Check this checkbox</label>
-    <div class="invalid-feedback">Example invalid feedback text</div>
+    <div class="invalid-feedback" id="supportedElements02">
+      Example invalid feedback text
+    </div>
   </div>
 
   <div class="form-check">
-    <input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" required>
+    <input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" aria-describedby="supportedElements03" required>
     <label class="form-check-label" for="validationFormCheck2">Toggle this radio</label>
   </div>
   <div class="form-check mb-3">
-    <input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
+    <input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" aria-describedby="supportedElements03" required>
     <label class="form-check-label" for="validationFormCheck3">Or toggle this other radio</label>
-    <div class="invalid-feedback">More example invalid feedback text</div>
+    <div class="invalid-feedback" id="supportedElements03">
+      More example invalid feedback text
+    </div>
   </div>
 
   <div class="mb-3">
-    <select class="form-select" required aria-label="select example">
+    <select class="form-select" required aria-label="select example" aria-describedby="supportedElements04" required>
       <option value="">Open this select menu</option>
       <option value="1">One</option>
       <option value="2">Two</option>
       <option value="3">Three</option>
     </select>
-    <div class="invalid-feedback">Example invalid select feedback</div>
+    <div class="invalid-feedback" id="supportedElements04">
+      Example invalid select feedback
+    </div>
   </div>
 
   <div class="form-file mb-3">
-    <input type="file" class="form-file-input" id="validationFormFile" required>
+    <input type="file" class="form-file-input" id="validationFormFile" aria-describedby="supportedElements05" required>
     <label class="form-file-label" for="validationFormFile">
       <span class="form-file-text">Choose file...</span>
       <span class="form-file-button">Browse</span>
     </label>
-    <div class="invalid-feedback">Example invalid form file feedback</div>
+    <div class="invalid-feedback" id="supportedElements05">
+      Example invalid form file feedback
+    </div>
   </div>
 
   <div class="mb-3">
     <label for="validationInputGroup" class="form-label">Username</label>
     <div class="input-group-end">
       <span class="input-group-text" id="validationInputGroupAddon">@</span>
-      <input type="text" class="form-control is-invalid" id="validationInputGroup" aria-describedby="validationInputGroupAddon" required>
-      <div class="invalid-feedback">
+      <input type="text" class="form-control is-invalid" id="validationInputGroup" aria-describedby="validationInputGroupAddon supportedElements06" required>
+      <div class="invalid-feedback" id="supportedElements06">
         Please choose a username.
       </div>
     </div>
@@ -312,15 +324,15 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
 <form class="row g-3 needs-validation" novalidate>
   <div class="col-md-4 position-relative">
     <label for="validationTooltip01" class="form-label">First name</label>
-    <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
-    <div class="valid-tooltip">
+    <input type="text" class="form-control" id="validationTooltip01" value="Mark" aria-describedby="tooltipFeedback01" required>
+    <div class="valid-tooltip" id="tooltipFeedback01">
       Looks good!
     </div>
   </div>
   <div class="col-md-4 position-relative">
     <label for="validationTooltip02" class="form-label">Last name</label>
-    <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
-    <div class="valid-tooltip">
+    <input type="text" class="form-control" id="validationTooltip02" value="Otto" aria-describedby="tooltipFeedback02" required>
+    <div class="valid-tooltip" id="tooltipFeedback02">
       Looks good!
     </div>
   </div>
@@ -328,33 +340,33 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
     <label for="validationTooltipUsername" class="form-label">Username</label>
     <div class="input-group-start">
       <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
-      <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
-      <div class="invalid-tooltip">
+      <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend tooltipFeedback03" required>
+      <div class="invalid-tooltip" id="tooltipFeedback03">
         Please choose a unique and valid username.
       </div>
     </div>
   </div>
   <div class="col-md-6 position-relative">
     <label for="validationTooltip03" class="form-label">City</label>
-    <input type="text" class="form-control" id="validationTooltip03" required>
-    <div class="invalid-tooltip">
+    <input type="text" class="form-control" id="validationTooltip03" aria-describedby="tooltipFeedback04" required>
+    <div class="invalid-tooltip" id="tooltipFeedback04">
       Please provide a valid city.
     </div>
   </div>
   <div class="col-md-3 position-relative">
     <label for="validationTooltip04" class="form-label">State</label>
-    <select class="form-select" id="validationTooltip04" required>
+    <select class="form-select" id="validationTooltip04" aria-describedby="tooltipFeedback05" required>
       <option selected disabled value="">Choose...</option>
       <option>...</option>
     </select>
-    <div class="invalid-tooltip">
+    <div class="invalid-tooltip" id="tooltipFeedback05">
       Please select a valid state.
     </div>
   </div>
   <div class="col-md-3 position-relative">
     <label for="validationTooltip05" class="form-label">Zip</label>
-    <input type="text" class="form-control" id="validationTooltip05" required>
-    <div class="invalid-tooltip">
+    <input type="text" class="form-control" id="validationTooltip05" aria-describedby="tooltipFeedback06" required>
+    <div class="invalid-tooltip" id="tooltipFeedback06">
       Please provide a valid zip.
     </div>
   </div>

From fa16772108ec034cb3a577a472265f950826a7b6 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 16 Sep 2020 14:35:37 -0700
Subject: [PATCH 07/10] Fix IDs and missing aria-describedby attributes

---
 site/content/docs/5.0/forms/input-group.md | 32 +++++++++++-----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/site/content/docs/5.0/forms/input-group.md b/site/content/docs/5.0/forms/input-group.md
index 7263114f03a5..19d3787ea09f 100644
--- a/site/content/docs/5.0/forms/input-group.md
+++ b/site/content/docs/5.0/forms/input-group.md
@@ -121,32 +121,32 @@ Use `.btn`s as starting and ending addons with our supported form controls.
 
 {{< example >}}
 <div class="input-group-start mb-3">
-  <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
-  <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
+  <button class="btn btn-outline-secondary" type="button" id="buttonAddon01">Button</button>
+  <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="buttonAddon01">
 </div>
 
 <div class="input-group-end">
-  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
-  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
+  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="buttonAddon02">
+  <button class="btn btn-outline-secondary" type="button" id="buttonAddon02">Button</button>
 </div>
 {{< /example >}}
 
 {{< example >}}
 <div class="input-group-start mb-3">
-  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
-  <textarea class="form-control" aria-label="With textarea"></textarea>
+  <button class="btn btn-outline-secondary" type="button" id="buttonAddon03">Button</button>
+  <textarea class="form-control" aria-label="With textarea" aria-describedby="buttonAddon03"></textarea>
 </div>
 
 <div class="input-group-end">
-  <textarea class="form-control" aria-label="With textarea"></textarea>
-  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
+  <textarea class="form-control" aria-label="With textarea" aria-describedby="buttonAddon04"></textarea>
+  <button class="btn btn-outline-secondary" type="button" id="buttonAddon04">Button</button>
 </div>
 {{< /example >}}
 
 {{< example >}}
 <div class="input-group-start mb-3">
-  <button class="btn btn-outline-secondary" type="button">Button</button>
-  <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
+  <button class="btn btn-outline-secondary" type="button" id="buttonAddon05">Button</button>
+  <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon" aria-describedby="buttonAddon05">
     <option selected>Choose...</option>
     <option value="1">One</option>
     <option value="2">Two</option>
@@ -155,21 +155,21 @@ Use `.btn`s as starting and ending addons with our supported form controls.
 </div>
 
 <div class="input-group-end">
-  <select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
+  <select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon" aria-describedby="buttonAddon06">
     <option selected>Choose...</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
   </select>
-  <button class="btn btn-outline-secondary" type="button">Button</button>
+  <button class="btn btn-outline-secondary" type="button" id="buttonAddon06">Button</button>
 </div>
 {{< /example >}}
 
 {{< example >}}
 <div class="input-group-start mb-3">
-  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
+  <button class="btn btn-outline-secondary" type="button" id="buttonAddon07">Button</button>
   <div class="form-file">
-    <input type="file" class="form-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
+    <input type="file" class="form-file-input" id="inputGroupFile03" aria-describedby="buttonAddon07">
     <label class="form-file-label" for="inputGroupFile03">
       <span class="form-file-text">Choose file...</span>
       <span class="form-file-button">Browse</span>
@@ -179,13 +179,13 @@ Use `.btn`s as starting and ending addons with our supported form controls.
 
 <div class="input-group-end">
   <div class="form-file">
-    <input type="file" class="form-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
+    <input type="file" class="form-file-input" id="inputGroupFile04" aria-describedby="buttonAddon08">
     <label class="form-file-label" for="inputGroupFile04">
       <span class="form-file-text">Choose file...</span>
       <span class="form-file-button">Browse</span>
     </label>
   </div>
-  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
+  <button class="btn btn-outline-secondary" type="button" id="buttonAddon08">Button</button>
 </div>
 {{< /example >}}
 

From 84f20446638eaea081c783902b705147a4c47a83 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 16 Sep 2020 14:35:46 -0700
Subject: [PATCH 08/10] De-dupe required attr

---
 site/content/docs/5.0/forms/validation.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md
index c59bcecf1ee2..41eb30596272 100644
--- a/site/content/docs/5.0/forms/validation.md
+++ b/site/content/docs/5.0/forms/validation.md
@@ -277,7 +277,7 @@ Validation styles are available for the following form controls and components:
   </div>
 
   <div class="mb-3">
-    <select class="form-select" required aria-label="select example" aria-describedby="supportedElements04" required>
+    <select class="form-select" aria-label="select example" aria-describedby="supportedElements04" required>
       <option value="">Open this select menu</option>
       <option value="1">One</option>
       <option value="2">Two</option>

From 7277b4585b148cd5e4099161d0517639f7cf271d Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Thu, 1 Oct 2020 10:13:23 +0300
Subject: [PATCH 09/10] Update migration.md

---
 site/content/docs/5.0/migration.md | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index f86ba3d76fc2..9d4c81abae13 100644
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -21,6 +21,19 @@ toc: true
 
 - Introduce `$enable-smooth-scroll`, which applies `scroll-behavior: smooth` globally—except for users asking for reduced motion through `prefers-reduced-motion` media query. [See #31877](https://github.com/twbs/bootstrap/pull/31877)
 
+### Components
+
+#### Input groups
+
+- Drastically reduced supported options, dropping support for:
+  - Addons on both sides
+  - Dropdowns and button groups as addons
+  - Multiple text and button addons
+  - Multiple form controls
+- Replaced `.input-group` with `.input-group-start` and `.input-group-end`. Use one of the two classes depending on where you want your text or button addon.
+
+---
+
 ## v5.0.0-alpha2
 
 ### Sass
@@ -257,17 +270,8 @@ Changes to Reboot, typography, tables, and more.
 - Dropped `.form-row` for the more flexible grid gutters.
 - Dropped `.form-inline` for the more flexible grid.
 - Dropped support for `.form-control-plaintext` inside `.input-group`s.
-- Form labels now require the `.form-label` class. Sass variables are now available to style form labels to your needs. [See #30476](https://github.com/twbs/bootstrap/pull/30476)
-
-#### Input groups
-
-- Drastically reduced supported options, dropping support for:
-  - Addons on both sides
-  - Dropdowns and button groups as addons
-  - Multiple text and button addons
-  - Multiple form controls
-- Replaced `.input-group` with `.input-group-start` and `.input-group-end`. Use one of the two classes depending on where you want your text or button addon.
 - Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups.
+- Form labels now require the `.form-label` class. Sass variables are now available to style form labels to your needs. [See #30476](https://github.com/twbs/bootstrap/pull/30476)
 
 ### Components
 

From b82876aaed3e19778cb86ddb795f49499a160934 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 21 Oct 2020 10:20:03 -0700
Subject: [PATCH 10/10] Testing out an .input-group-around

---
 scss/forms/_input-group.scss               | 24 +++++++++++++++++++++-
 site/content/docs/5.0/forms/input-group.md | 19 ++++++++++++++---
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index a51edceeb6dd..fc4eb448aac8 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -3,7 +3,8 @@
 //
 
 .input-group-start,
-.input-group-end {
+.input-group-end,
+.input-group-around {
   position: relative;
   display: flex;
   flex-wrap: wrap; // For form validation feedback
@@ -155,3 +156,24 @@
     @include border-right-radius(0);
   }
 }
+
+.input-group-around {
+  > .input-group-text,
+  > .btn {
+    &:first-child {
+      @include border-right-radius(0);
+    }
+
+    &:not(:first-child) {
+      margin-left: -$input-border-width;
+      @include border-left-radius(0);
+    }
+  }
+
+  > .form-control,
+  > .form-select,
+  > .form-file {
+    margin-left: -$input-border-width;
+    @include border-radius(0);
+  }
+}
diff --git a/site/content/docs/5.0/forms/input-group.md b/site/content/docs/5.0/forms/input-group.md
index 19d3787ea09f..00ec28e56351 100644
--- a/site/content/docs/5.0/forms/input-group.md
+++ b/site/content/docs/5.0/forms/input-group.md
@@ -10,7 +10,7 @@ toc: true
 
 In an effort to streamline our components and still support form validation styles, input groups have been drastically simplified in Bootstrap 5. We no longer support multiple addons, multiple buttons, multiple form controls, dropdowns, and segmented button dropdowns. If you find yourself needing these, we suggest using standard form controls, buttons, and dropdowns in an inline form layout.
 
-With v5, `.input-group` has been replaced by direction-specific classes `.input-group-start` and `.input-group-end`. The naming scheme here pulls from CSS's flex box and logical properties. For example, instead of _left_, we use _start_.
+With v5, `.input-group` has been replaced by direction-specific classes `.input-group-start`, `.input-group-end`, and `.input-group-ardoun`. The naming scheme here pulls from CSS's flex box and logical properties. For example, instead of _left_, we use _start_.
 
 Place one add-on or button on either side of an input. Remember to place `<label>`s outside the input group.
 
@@ -20,10 +20,16 @@ Place one add-on or button on either side of an input. Remember to place `<label
   <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="inputGroupStart01">
 </div>
 
-<div class="input-group-end">
+<div class="input-group-end mb-3">
   <input type="text" class="form-control" placeholder="100" aria-label="Amount" aria-describedby="inputGroupEnd01">
   <span class="input-group-text" id="inputGroupEnd01">.00</span>
 </div>
+
+<div class="input-group-around">
+  <span class="input-group-text" id="inputGroupAround01">$</span>
+  <input type="text" class="form-control" placeholder="100" aria-label="Amount" aria-describedby="inputGroupAround01 inputGroupAround01b">
+  <span class="input-group-text" id="inputGroupAround01b">.00</span>
+</div>
 {{< /example >}}
 
 ## Supported configurations
@@ -38,6 +44,7 @@ Configurations that are supported include:
 
 - Text or button before a form control
 - Text or button after a form control
+- Text or button before and after a form control
 
 See how these form controls come together with text or button addons in our supported configurations below.
 
@@ -51,10 +58,16 @@ Use `.input-group-text` as starting and ending addons with our supported form co
   <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="inputGroupStart02">
 </div>
 
-<div class="input-group-end">
+<div class="input-group-end mb-3">
   <input type="text" class="form-control" placeholder="100" aria-label="Amount" aria-describedby="inputGroupEnd02">
   <span class="input-group-text" id="inputGroupEnd02">.00</span>
 </div>
+
+<div class="input-group-around">
+  <span class="input-group-text" id="inputGroupAround02">$</span>
+  <input type="text" class="form-control" placeholder="100" aria-label="Amount" aria-describedby="inputGroupAround02 inputGroupAround02b">
+  <span class="input-group-text" id="inputGroupAround02b">.00</span>
+</div>
 {{< /example >}}
 
 {{< example >}}