diff options
| -rw-r--r-- | scss/forms/_form-check.scss | 22 | ||||
| -rw-r--r-- | site/content/docs/5.1/forms/checks-radios.md | 24 |
2 files changed, 46 insertions, 0 deletions
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index a52a2e7c8..8e7cbed43 100644 --- 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 efd040de0..2ca72543c 100644 --- 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. |