From: Tommaso Allegretti <61681908+TommasoAllegretti@users.noreply.github.com>
Date: Wed, 9 Apr 2025 18:29:54 +0000 (+0200)
Subject: Docs: add "Border radius" section for Forms > Input group (#40776)
X-Git-Tag: v5.3.6~25
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=c147a5d7d6e881e68503fb367bafcd8b51e62def;p=thirdparty%2Fbootstrap.git

Docs: add "Border radius" section for Forms > Input group (#40776)

Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
---

diff --git a/site/content/docs/5.3/forms/input-group.md b/site/content/docs/5.3/forms/input-group.md
index d984a485bc..6de39e58b4 100644
--- a/site/content/docs/5.3/forms/input-group.md
+++ b/site/content/docs/5.3/forms/input-group.md
@@ -59,6 +59,18 @@ Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custo
 </div>
 {{< /example >}}
 
+## Border radius
+
+Due to limitations of browser support at the time, `border-radius` styles can only be applied to the first and last children within the `.input-group` class. Any non-visible element in one of those positions will cause the input group to render incorrectly. This will unfortunately not be fixed until v6 most likely.
+
+{{< example >}}
+<div class="input-group">
+  <span class="input-group-text" id="visible-addon">@</span>
+  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="visible-addon">
+  <input type="text" class="form-control d-none" placeholder="Hidden input" aria-label="Hidden input" aria-describedby="visible-addon">
+</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.