Add `.form-check-reverse` modifier class (#33606)

* Add .form-check-reverse modifier class

* Update checks-radios.md

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index a52a2e7c816548db4aeaf6f812aed673e1aa78a0..8e7cbed43c5f41fa53f12519bdfc41cc92ab81d7 100644 (file)
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -14,6 +14,18 @@
   }
 }
 
+.form-check-reverse {
+  padding-right: $form-check-padding-start;
+  padding-left: 0;
+  text-align: right;
+
+  .form-check-input {
+    float: right;
+    margin-right: $form-check-padding-start * -1;
+    margin-left: 0;
+  }
+}
+
 .form-check-input {
   width: $form-check-input-width;
   height: $form-check-input-width;
@@ -130,6 +142,16 @@
       }
     }
   }
+
+  &.form-check-reverse {
+    padding-right: $form-switch-padding-start;
+    padding-left: 0;
+
+    .form-check-input {
+      margin-right: $form-switch-padding-start * -1;
+      margin-left: 0;
+    }
+  }
 }
 
 .form-check-inline {

diff --git a/site/content/docs/5.1/forms/checks-radios.md b/site/content/docs/5.1/forms/checks-radios.md
index efd040de03950a89acac54d672995bbf3e43864b..2ca72543caeaea5b5ffe0c952287e9aad3d08bf0 100644 (file)
--- a/site/content/docs/5.1/forms/checks-radios.md
+++ b/site/content/docs/5.1/forms/checks-radios.md
@@ -197,6 +197,30 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
 </div>
 {{< /example >}}
 
+## Reverse
+
+Put your checkboxes, radios, and switches on the opposite side with the `.form-check-reverse` modifier class.
+
+{{< example >}}
+<div class="form-check form-check-reverse">
+  <input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
+  <label class="form-check-label" for="reverseCheck1">
+    Reverse checkbox
+  </label>
+</div>
+<div class="form-check form-check-reverse">
+  <input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
+  <label class="form-check-label" for="reverseCheck2">
+    Disabled reverse checkbox
+  </label>
+</div>
+
+<div class="form-check form-switch form-check-reverse">
+  <input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
+  <label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
+</div>
+{{< /example >}}
+
 ## Without labels
 
 Omit the wrapping `.form-check` for checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`). See the [forms overview accessibility]({{< docsref "/forms/overview#accessibility" >}}) section for details.