diff --git a/site/docs/4.4/assets/scss/_component-examples.scss b/site/docs/4.4/assets/scss/_component-examples.scss index 169100c340..41360d6c45 100644 --- a/site/docs/4.4/assets/scss/_component-examples.scss +++ b/site/docs/4.4/assets/scss/_component-examples.scss @@ -333,6 +333,10 @@ } } +.bd-example-forms-input-group-workaround .fix-rounded-right { + @include border-right-radius(.2rem !important); +} + // // Code snippets // diff --git a/site/docs/4.4/components/forms.md b/site/docs/4.4/components/forms.md index c138268f91..e57eb580ce 100644 --- a/site/docs/4.4/components/forms.md +++ b/site/docs/4.4/components/forms.md @@ -752,6 +752,12 @@ We currently recommend using custom validation styles, as native browser default {% endcapture %} {% include callout.html content=callout type="warning" %} +{% capture callout %} +##### Input group validation +Input groups have difficulty with validation styles, unfortunately. Our recommendation is to place feedback messages as sibling elements of the `.input-group` that has `.is-{valid|invalid}`. Placing feedback messages within input groups breaks the `border-radius`. [See this workaround](#input-group-validation-workaround). +{% endcapture %} +{% include callout.html content=callout type="warning" %} + ### How it works Here's how form validation works with Bootstrap: @@ -976,12 +982,6 @@ Validation styles are available for the following form controls and components: - `.custom-checkbox`s and `.custom-radio`s - `.custom-file` -{% capture callout %} -##### Input group validation -Input groups have difficulty with validation styles, unfortunately. Our recommendation is to place feedback messages as sibling elements of the `.input-group` that has `.is-{valid|invalid}`. Placing feedback messages within input groups breaks the `border-radius`. [See this comment for a workaround](https://github.com/twbs/bootstrap/issues/25110#issuecomment-586565165). -{% endcapture %} -{% include callout.html content=callout type="warning" %} - {% capture example %}
@@ -1153,6 +1153,68 @@ $form-validation-states: map-merge( } {% endhighlight %} +### Input group validation workaround + +When you are using a medium size input group and don't customize the default border radius values, add `.rounded-right` to the missing border radius elements: + +{% highlight html %} +
+
+ @ +
+ +
+ Please choose a username. +
+
+{% endhighlight %} + +
+
+
+ @ +
+ +
+ Please choose a username. +
+
+
+ +When you are using a small or large input-group or customizing the default border radius values, add custom CSS to the missing border radius elements: + +{% highlight css %} +/* Change values to match the radius of your form control */ +.fix-rounded-right { + border-top-right-radius: .2rem !important; + border-bottom-right-radius: .2rem !important; +} +{% endhighlight %} + +{% highlight html %} +
+
+ @ +
+ +
+ Please choose a username. +
+
+{% endhighlight %} + +
+
+
+ @ +
+ +
+ Please choose a username. +
+
+
+ ## Custom forms For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements for any default form control.