v5: .form-check layout changes (#29322)

* Scope .form-check-input layout to the .form-check parent

* Remove margin-bottom from list-group-items in case they are label elements

* document .form-check in input groups and list groups, and cleanup the no-label examples in the main .form-check docs

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 6ac5e551877f3466c4e81e40acd4a65212724830..057eb8057dab045d40c639b6f0962e3f45048b28 100644 (file)
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -46,6 +46,7 @@
   position: relative;
   display: block;
   padding: $list-group-item-padding-y $list-group-item-padding-x;
+  margin-bottom: 0; // for <label> variations
   color: $list-group-color;
   background-color: $list-group-bg;
   border: $list-group-border-width solid $list-group-border-color;

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index bd35b6b04757966624838b73218598921196ee2b..88b4ab6efa3ca16871024ebc6d58f99e9e9570de 100644 (file)
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -7,14 +7,17 @@
   min-height: $form-check-min-height;
   padding-left: $form-check-padding-left;
   margin-bottom: $form-check-margin-bottom;
+
+  .form-check-input {
+    float: left;
+    margin-left: $form-check-padding-left * -1;
+  }
 }
 
 .form-check-input {
-  float: left;
   width: $form-check-input-width;
   height: $form-check-input-width;
   margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
-  margin-left: $form-check-padding-left * -1;
   background-color: $form-check-input-bg;
   border: $form-check-input-border;
   appearance: none;

diff --git a/site/content/docs/4.3/components/list-group.md b/site/content/docs/4.3/components/list-group.md
index 21bab14d779ab4f083db2675cd3878e3173b8871..2599641ea2ad305b28cc88778ae349a47b2d8cb3 100644 (file)
--- a/site/content/docs/4.3/components/list-group.md
+++ b/site/content/docs/4.3/components/list-group.md
@@ -198,6 +198,63 @@ Add nearly any HTML within, even for linked list groups like the one below, with
 </div>
 {{< /example >}}
 
+## Checkboxes and radios
+
+Place Bootstrap's checkboxes and radios within list group items and customize as needed. You can use them without `<label>`s, but please remember to include an `aria-label` attribute and value for accessibility.
+
+{{< example >}}
+<ul class="list-group">
+  <li class="list-group-item">
+    <input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
+    Cras justo odio
+  </li>
+  <li class="list-group-item">
+    <input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
+    Dapibus ac facilisis in
+  </li>
+  <li class="list-group-item">
+    <input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
+    Morbi leo risus
+  </li>
+  <li class="list-group-item">
+    <input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
+    Porta ac consectetur ac
+  </li>
+  <li class="list-group-item">
+    <input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
+    Vestibulum at eros
+  </li>
+</ul>
+{{< /example >}}
+
+And if you want `<label>`s as the `.list-group-item` for large hit areas, you can do that, too.
+
+{{< example >}}
+<div class="list-group">
+  <label class="list-group-item">
+    <input class="form-check-input float-left mr-2" type="checkbox" value="">
+    Cras justo odio
+  </label>
+  <label class="list-group-item">
+    <input class="form-check-input float-left mr-2" type="checkbox" value="">
+    Dapibus ac facilisis in
+  </label>
+  <label class="list-group-item">
+    <input class="form-check-input float-left mr-2" type="checkbox" value="">
+    Morbi leo risus
+  </label>
+  <label class="list-group-item">
+    <input class="form-check-input float-left mr-2" type="checkbox" value="">
+    Porta ac consectetur ac
+  </label>
+  <label class="list-group-item">
+    <input class="form-check-input float-left mr-2" type="checkbox" value="">
+    Vestibulum at eros
+  </label>
+</div>
+{{< /example >}}
+
+
 ## JavaScript behavior
 
 Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our list group to create tabbable panes of local content.

diff --git a/site/content/docs/4.3/forms/checks.md b/site/content/docs/4.3/forms/checks.md
index 34369b80f4fb2b40841b66f960c064a0467a8145..d7427e1d212b848ae7466a32f5a576a3d95efabc 100644 (file)
--- a/site/content/docs/4.3/forms/checks.md
+++ b/site/content/docs/4.3/forms/checks.md
@@ -198,13 +198,14 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
 
 ## Without labels
 
-Add `.position-static` to inputs within `.form-check` that don't have any label text. Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
+Omit the wrapping `.form-check` for checkboxes and radios that have no label text. Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
 
 {{< example >}}
-<div class="form-check">
-  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
+<div>
+  <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
 </div>
-<div class="form-check">
-  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
+
+<div>
+  <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
 </div>
 {{< /example >}}

diff --git a/site/content/docs/4.3/forms/input-group.md b/site/content/docs/4.3/forms/input-group.md
index 7762b8adac583cbdc1c1b18f3e5912ffe8ea28ca..2faa6721e3865c823a8c9306c6ffc96243d28f52 100644 (file)
--- a/site/content/docs/4.3/forms/input-group.md
+++ b/site/content/docs/4.3/forms/input-group.md
@@ -101,7 +101,7 @@ Place any checkbox or radio option within an input group's addon instead of text
 <div class="input-group mb-3">
   <div class="input-group-prepend">
     <div class="input-group-text">
-      <input type="checkbox" aria-label="Checkbox for following text input">
+      <input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input">
     </div>
   </div>
   <input type="text" class="form-control" aria-label="Text input with checkbox">
@@ -110,7 +110,7 @@ Place any checkbox or radio option within an input group's addon instead of text
 <div class="input-group">
   <div class="input-group-prepend">
     <div class="input-group-text">
-      <input type="radio" aria-label="Radio button for following text input">
+      <input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input">
     </div>
   </div>
   <input type="text" class="form-control" aria-label="Text input with radio button">