Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 18 additions & 4 deletions scss/forms/_input-group.scss
Original file line number Diff line number Diff line change
Expand Up @@ -128,12 +128,26 @@

// 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);
&:not(.has-validation) {
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
> .dropdown-toggle:nth-last-child(n + 3) {
@include border-right-radius(0);
}
}

&.has-validation {
> :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
> .dropdown-toggle:nth-last-child(n + 4) {
@include border-right-radius(0);
}
}

$validation-messages: "";
@each $state in map-keys($form-validation-states) {
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
}

> :not(:first-child):not(.dropdown-menu) {
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
margin-left: -$input-border-width;
@include border-left-radius(0);
}
Expand Down
6 changes: 4 additions & 2 deletions site/content/docs/5.0/forms/validation.md
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,8 @@ We recommend using client-side validation, but in case you require server-side v

For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using `aria-describedby` (noting that this attribute allows more than one `id` to be referenced, in case the field already points to additional form text).

To fix [issues with border radii](https://github.com/twbs/bootstrap/issues/25110), input groups require an additional `.has-validation` class.

{{< example >}}
<form class="row g-3">
<div class="col-md-4">
Expand All @@ -183,7 +185,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 has-validation">
<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">
Expand Down Expand Up @@ -314,7 +316,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 has-validation">
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
<input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
<div class="invalid-tooltip">
Expand Down
4 changes: 4 additions & 0 deletions site/content/docs/5.0/migration.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ 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)

### Forms

- The longstanding [Missing border radius on input group with validation feedback bug](https://github.com/twbs/bootstrap/issues/25110) is finally fixed by adding an additional `.has-validation` class to input groups with validation.

## v5.0.0-alpha2

### Sass
Expand Down