Fixes #20608 and #20578: Consistent checkbox and radio markup (#20629)

- Update docs examples to use newer .form-check suite of classes
- Update form validation mixin to use newer classes as well

diff --git a/docs/components/forms.md b/docs/components/forms.md
index fcacd461e8869ce9ea8596cc5b48bc323fcbeb6e..09d0d4f8f29ab6476e8c63d5a26d90fb80938965 100644 (file)
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -59,28 +59,29 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
   </div>
   <fieldset class="form-group">
     <legend>Radio buttons</legend>
-    <div class="radio">
-      <label>
-        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+    <div class="form-check">
+      <label class="form-check-label">
+        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
         Option one is this and that&mdash;be sure to include why it's great
       </label>
     </div>
-    <div class="radio">
-      <label>
-        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+    <div class="form-check">
+    <label class="form-check-label">
+        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
         Option two can be something else and selecting it will deselect option one
       </label>
     </div>
-    <div class="radio disabled">
-      <label>
-        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+    <div class="form-check disabled">
+    <label class="form-check-label">
+        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
         Option three is disabled
       </label>
     </div>
   </fieldset>
-  <div class="checkbox">
-    <label>
-      <input type="checkbox"> Check me out
+  <div class="form-check">
+    <label class="form-check-label">
+      <input type="checkbox" class="form-check-input">
+      Check me out
     </label>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
@@ -150,10 +151,8 @@ Below is a complete list of the specific form controls supported by Bootstrap an
     <tr>
       <td class="text-nowrap">
 {% markdown %}
-`.radio`<br>
-`.radio-inline`<br>
-`.checkbox`<br>
-`.checkbox-inline`
+`.form-check`<br>
+`.form-check-inline`
 {% endmarkdown %}
       </td>
       <td class="text-nowrap">
@@ -730,21 +729,21 @@ Ensure that an alternative indication of state is also provided. For instance, y
 {% endexample %}
 
 {% example html %}
-<div class="checkbox has-success">
-  <label>
-    <input type="checkbox" id="checkboxSuccess" value="option1">
+<div class="form-check has-success">
+  <label class="form-check-label">
+    <input type="checkbox" class="form-check-input" id="checkboxSuccess" value="option1">
     Checkbox with success
   </label>
 </div>
-<div class="checkbox has-warning">
-  <label>
-    <input type="checkbox" id="checkboxWarning" value="option1">
+<div class="form-check has-warning">
+  <label class="form-check-label">
+    <input type="checkbox" class="form-check-input" id="checkboxWarning" value="option1">
     Checkbox with warning
   </label>
 </div>
-<div class="checkbox has-danger">
-  <label>
-    <input type="checkbox" id="checkboxDanger" value="option1">
+<div class="form-check has-danger">
+  <label class="form-check-label">
+    <input type="checkbox" class="form-check-input" id="checkboxDanger" value="option1">
     Checkbox with danger
   </label>
 </div>

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 026e41e23d8b24ca2a98c9fce6482b85744f7fe6..b281dd7157040266c19db8ee8311d60c0e2ecd59 100644 (file)
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -7,14 +7,8 @@
   // Color the label and help text
   .form-control-feedback,
   .form-control-label,
-  .radio,
-  .checkbox,
-  .radio-inline,
-  .checkbox-inline,
-  &.radio label,
-  &.checkbox label,
-  &.radio-inline label,
-  &.checkbox-inline label,
+  .form-check-label,
+  .form-check-inline,
   .custom-control {
     color: $color;
   }