diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 7a9a14dd7be3..fc4eb448aac8 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -2,7 +2,9 @@
 // Base styles
 //
 
-.input-group {
+.input-group-start,
+.input-group-end,
+.input-group-around {
   position: relative;
   display: flex;
   flex-wrap: wrap; // For form validation feedback
@@ -127,14 +129,51 @@
 // with the `.input-group >` part, but without it, we cannot override the sizing.
 
 // 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) {
+.input-group-start {
+  > .input-group-text,
+  > .btn {
     @include border-right-radius(0);
   }
 
-  > :not(:first-child):not(.dropdown-menu) {
+  > .form-control,
+  > .form-select,
+  > .form-file {
+    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);
+  }
+}
+
+.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/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/input-group.md b/site/content/docs/5.0/forms/input-group.md
index 599fdbacde1e..00ec28e56351 100644
--- a/site/content/docs/5.0/forms/input-group.md
+++ b/site/content/docs/5.0/forms/input-group.md
@@ -1,266 +1,165 @@
 ---
 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`, `.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_.
 
-<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 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">
-  <span class="input-group-text">With textarea</span>
-  <textarea class="form-control" aria-label="With textarea"></textarea>
-</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 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 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 >}}
 
-## Sizing
+## Supported configurations
 
-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.
+As mentioned, there are significantly fewer supported options for input groups in v5. To start, here are the supported form controls:
 
-**Sizing on the individual input group elements isn't supported.**
+- `.form-control` (`<input>` and `<textarea>`)
+- `.form-select` (without `multiple` or `size`)
+- `.form-file`
 
-{{< 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>
+Configurations that are supported include:
 
-<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">
-</div>
+- Text or button before a form control
+- Text or button after a form control
+- Text or button before and after a form control
 
-<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>
-{{< /example >}}
+See how these form controls come together with text or button addons in our supported configurations below.
 
-## Checkboxes and radios
+### Text addons
 
-Place any checkbox or radio option within an input group's addon instead of text.
+Use `.input-group-text` as starting and ending addons with our supported form controls.
 
 {{< 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" id="inputGroupStart02">@</span>
+  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="inputGroupStart02">
 </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 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>
-{{< /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-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 >}}
 
-## Multiple addons
-
-Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
-
 {{< 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">With textarea</span>
+  <textarea class="form-control" aria-label="With textarea"></textarea>
 </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">
+  <textarea class="form-control" aria-label="With textarea"></textarea>
+  <span class="input-group-text">With textarea</span>
 </div>
 {{< /example >}}
 
-## Button addons
-
 {{< example >}}
-<div class="input-group 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">
-  <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 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>
 
-<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 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 >}}
 
-## 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 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">
-  <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 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 >}}
 
-## Segmented buttons
+### Button addons
+
+Use `.btn`s as starting and ending addons with our supported form controls.
 
 {{< 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="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">
-  <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">
+  <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 >}}
 
-## 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 class="input-group-start mb-3">
+  <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 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 class="input-group-end">
+  <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 >}}
 
-<div class="input-group 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">
+{{< example >}}
+<div class="input-group-start mb-3">
+  <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>
@@ -268,61 +167,106 @@ Input groups include support for custom selects and custom file inputs. Browser
   </select>
 </div>
 
-<div class="input-group">
-  <select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
+<div class="input-group-end">
+  <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 >}}
 
-### Custom file input
-
 {{< example >}}
-<div class="input-group mb-3">
-  <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
+<div class="input-group-start mb-3">
+  <button class="btn btn-outline-secondary" type="button" id="buttonAddon07">Button</button>
   <div class="form-file">
-    <input type="file" class="form-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
-    <label class="form-file-label" for="inputGroupFile01">
+    <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>
     </label>
   </div>
 </div>
 
-<div class="input-group mb-3">
+<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">
+    <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>
-  <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
+  <button class="btn btn-outline-secondary" type="button" id="buttonAddon08">Button</button>
 </div>
+{{< /example >}}
 
-<div class="input-group 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">
-    <label class="form-file-label" for="inputGroupFile03">
-      <span class="form-file-text">Choose file...</span>
-      <span class="form-file-button">Browse</span>
-    </label>
+## 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">
-  <div class="form-file">
-    <input type="file" class="form-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
-    <label class="form-file-label" for="inputGroupFile04">
-      <span class="form-file-text">Choose file...</span>
-      <span class="form-file-button">Browse</span>
-    </label>
+<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>
-  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
 </div>
 {{< /example >}}
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..41eb30596272 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,59 +42,59 @@ 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>
   <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">
+      <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>
@@ -125,7 +129,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>
@@ -169,59 +173,59 @@ 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>
   <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">
+      <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>
@@ -239,51 +243,71 @@ 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">
   <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" 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 supportedElements06" required>
+      <div class="invalid-feedback" id="supportedElements06">
+        Please choose a username.
+      </div>
+    </div>
   </div>
 
   <div class="mb-3">
@@ -300,49 +324,49 @@ 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>
   <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">
+      <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>
diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index 6e5734854b2c..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