Redo checkboxes and radios

- Move disabled radio and checkbox styles to Reboot
- Collapse .radio and .checkbox into single class, .form-check
- Collapse .radio-inline and .checkbox-inline into single class, .form-check-inline
- Require classes for sub-elements in both new classes

dist/css/bootstrap.css

@@ -477,6 +477,11 @@ textarea {
   border-radius: 0;
 }
 
+input[type="radio"]:disabled,
+input[type="checkbox"]:disabled {
+  cursor: not-allowed;
+}
+
 input[type="date"],
 input[type="time"],
 input[type="datetime-local"],
@@ -2242,41 +2247,37 @@ select.form-control:focus::-ms-value {
   margin-bottom: 1rem;
 }
 
-.radio,
+.form-check {
-.checkbox {
   position: relative;
   display: block;
   margin-bottom: 0.75rem;
 }
 
-.radio label,
+.form-check + .form-check {
-.checkbox label {
+  margin-top: -.25rem;
+}
+
+.form-check.disabled .form-check-label {
+  cursor: not-allowed;
+}
+
+.form-check-label {
   padding-left: 1.25rem;
   margin-bottom: 0;
   cursor: pointer;
 }
 
-.radio label input:only-child,
+.form-check-input {
-.checkbox label input:only-child {
-  position: static;
-}
-
-.radio input[type="radio"],
-.radio-inline input[type="radio"],
-.checkbox input[type="checkbox"],
-.checkbox-inline input[type="checkbox"] {
   position: absolute;
   margin-top: .25rem;
   margin-left: -1.25rem;
 }
 
-.radio + .radio,
+.form-check-input:only-child {
-.checkbox + .checkbox {
+  position: static;
-  margin-top: -.25rem;
 }
 
-.radio-inline,
+.form-check-inline {
-.checkbox-inline {
   position: relative;
   display: inline-block;
   padding-left: 1.25rem;
@@ -2285,25 +2286,11 @@ select.form-control:focus::-ms-value {
   cursor: pointer;
 }
 
-.radio-inline + .radio-inline,
+.form-check-inline + .form-check-inline {
-.checkbox-inline + .checkbox-inline {
-  margin-top: 0;
   margin-left: .75rem;
 }
 
-input[type="radio"]:disabled, input[type="radio"].disabled,
+.form-check-inline.disabled {
-input[type="checkbox"]:disabled,
-input[type="checkbox"].disabled {
-  cursor: not-allowed;
-}
-
-.radio-inline.disabled,
-.checkbox-inline.disabled {
-  cursor: not-allowed;
-}
-
-.radio.disabled label,
-.checkbox.disabled label {
   cursor: not-allowed;
 }
 

docs/components/forms.md

@@ -425,41 +425,41 @@ Grid-based form layouts also support large and small inputs.
 
 ## Checkboxes and radios
 
-Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
+Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
 
-Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent `<label>`, you'll need to add the <code>.disabled</code> class to the parent `.radio`, `.radio-inline`, `.checkbox`, or `.checkbox-inline`.
+Disabled checkboxes and radios are supported, but to provide a `not-allowed` cursor on hover of the parent `<label>`, you'll need to add the `.disabled` class to the parent `.form-check`.
 
 ### Default (stacked)
 
 {% example html %}
-<div class="checkbox">
+<div class="form-check">
-  <label>
+  <label class="form-check-label">
-    <input type="checkbox" value="">
+    <input class="form-check-input" type="checkbox" value="">
     Option one is this and that&mdash;be sure to include why it's great
   </label>
 </div>
-<div class="checkbox disabled">
+<div class="form-check disabled">
-  <label>
+  <label class="form-check-label">
-    <input type="checkbox" value="" disabled>
+    <input class="form-check-input" type="checkbox" value="" disabled>
     Option two is disabled
   </label>
 </div>
 
-<div class="radio">
+<div class="form-check">
-  <label>
+  <label class="form-check-label">
-    <input type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
+    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
     Option one is this and that&mdash;be sure to include why it's great
   </label>
 </div>
-<div class="radio">
+<div class="form-check">
-  <label>
+  <label class="form-check-label">
-    <input type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
+    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
     Option two can be something else and selecting it will deselect option one
   </label>
 </div>
-<div class="radio disabled">
+<div class="form-check disabled">
-  <label>
+  <label class="form-check-label">
-    <input type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
+    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
     Option three is disabled
   </label>
 </div>
@@ -467,29 +467,29 @@ Disabled checkboxes and radios are supported, but to provide a "not-allowed" cur
 
 ### Inline
 
-Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes or radios for controls that appear on the same line.
+Groups of checkboxes or radios that appear on the same horizontal row are similar to their stacked counterparts, but require different HTML and a single class. To switch from stacked to inline, drop the surrounding `<div>`, add `.form-check-inline` to the `<label>`, and keep the `.form-check-input` on the `<input>`.
 
 {% example html %}
-<label class="checkbox-inline">
+<label class="form-check-inline">
-  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
+  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
 </label>
-<label class="checkbox-inline">
+<label class="form-check-inline">
-  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
+  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
 </label>
-<label class="checkbox-inline">
+<label class="form-check-inline">
-  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
+  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> 3
 </label>
 {% endexample %}
 
 {% example html %}
-<label class="radio-inline">
+<label class="form-check-inline">
-  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
+  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
 </label>
-<label class="radio-inline">
+<label class="form-check-inline">
-  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
+  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
 </label>
-<label class="radio-inline">
+<label class="form-check-inline">
-  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
+  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
 </label>
 {% endexample %}
 
@@ -498,14 +498,14 @@ Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes
 Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.** Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
 
 {% example html %}
-<div class="checkbox">
+<div class="form-check">
-  <label>
+  <label class="form-check-label">
-    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
+    <input class="form-check-input" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
   </label>
 </div>
-<div class="radio">
+<div class="form-check">
-  <label>
+  <label class="form-check-label">
-    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
+    <input class="form-check-input" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
   </label>
 </div>
 {% endexample %}

docs/dist/css/bootstrap.css

@@ -477,6 +477,11 @@ textarea {
   border-radius: 0;
 }
 
+input[type="radio"]:disabled,
+input[type="checkbox"]:disabled {
+  cursor: not-allowed;
+}
+
 input[type="date"],
 input[type="time"],
 input[type="datetime-local"],
@@ -2242,41 +2247,37 @@ select.form-control:focus::-ms-value {
   margin-bottom: 1rem;
 }
 
-.radio,
+.form-check {
-.checkbox {
   position: relative;
   display: block;
   margin-bottom: 0.75rem;
 }
 
-.radio label,
+.form-check + .form-check {
-.checkbox label {
+  margin-top: -.25rem;
+}
+
+.form-check.disabled .form-check-label {
+  cursor: not-allowed;
+}
+
+.form-check-label {
   padding-left: 1.25rem;
   margin-bottom: 0;
   cursor: pointer;
 }
 
-.radio label input:only-child,
+.form-check-input {
-.checkbox label input:only-child {
-  position: static;
-}
-
-.radio input[type="radio"],
-.radio-inline input[type="radio"],
-.checkbox input[type="checkbox"],
-.checkbox-inline input[type="checkbox"] {
   position: absolute;
   margin-top: .25rem;
   margin-left: -1.25rem;
 }
 
-.radio + .radio,
+.form-check-input:only-child {
-.checkbox + .checkbox {
+  position: static;
-  margin-top: -.25rem;
 }
 
-.radio-inline,
+.form-check-inline {
-.checkbox-inline {
   position: relative;
   display: inline-block;
   padding-left: 1.25rem;
@@ -2285,25 +2286,11 @@ select.form-control:focus::-ms-value {
   cursor: pointer;
 }
 
-.radio-inline + .radio-inline,
+.form-check-inline + .form-check-inline {
-.checkbox-inline + .checkbox-inline {
-  margin-top: 0;
   margin-left: .75rem;
 }
 
-input[type="radio"]:disabled, input[type="radio"].disabled,
+.form-check-inline.disabled {
-input[type="checkbox"]:disabled,
-input[type="checkbox"].disabled {
-  cursor: not-allowed;
-}
-
-.radio-inline.disabled,
-.checkbox-inline.disabled {
-  cursor: not-allowed;
-}
-
-.radio.disabled label,
-.checkbox.disabled label {
   cursor: not-allowed;
 }
 

scss/_forms.scss

@@ -174,83 +174,56 @@ select.form-control {
 //
 // Indent the labels to position radios/checkboxes as hanging controls.
 
-.radio,
+.form-check {
-.checkbox {
   position: relative;
   display: block;
-  // margin-top:    ($spacer * .75);
   margin-bottom: ($spacer * .75);
 
-  label {
-    padding-left: 1.25rem;
-    margin-bottom: 0;
-    cursor: pointer;
-
-    // When there's no labels, don't position the input.
-    input:only-child {
-      position: static;
-    }
-  }
-}
-.radio input[type="radio"],
-.radio-inline input[type="radio"],
-.checkbox input[type="checkbox"],
-.checkbox-inline input[type="checkbox"] {
-  position: absolute;
-  margin-top: .25rem;
-  // margin-top: 4px \9;
-  margin-left: -1.25rem;
-}
-
-.radio + .radio,
-.checkbox + .checkbox {
   // Move up sibling radios or checkboxes for tighter spacing
+  + .form-check  {
     margin-top: -.25rem;
   }
 
+  &.disabled {
+    .form-check-label {
+      cursor: $cursor-disabled;
+    }
+  }
+}
+
+.form-check-label {
+  padding-left: 1.25rem;
+  margin-bottom: 0; // Override default `<label>` bottom margin
+  cursor: pointer;
+}
+
+.form-check-input {
+  position: absolute;
+  margin-top: .25rem;
+  margin-left: -1.25rem;
+
+  &:only-child {
+    position: static;
+  }
+}
+
 // Radios and checkboxes on same line
-.radio-inline,
+.form-check-inline {
-.checkbox-inline {
   position: relative;
   display: inline-block;
   padding-left: 1.25rem;
-  margin-bottom: 0;
+  margin-bottom: 0; // Override default `<label>` bottom margin
   vertical-align: middle;
   cursor: pointer;
-}
+
-.radio-inline + .radio-inline,
+  + .form-check-inline {
-.checkbox-inline + .checkbox-inline {
-  margin-top: 0;
     margin-left: .75rem;
   }
 
-// Apply same disabled cursor tweak as for inputs
-// Some special care is needed because <label>s don't inherit their parent's `cursor`.
-//
-// Note: Neither radios nor checkboxes can be readonly.
-input[type="radio"],
-input[type="checkbox"] {
-  &:disabled,
   &.disabled {
     cursor: $cursor-disabled;
   }
 }
-// These classes are used directly on <label>s
-.radio-inline,
-.checkbox-inline {
-  &.disabled {
-    cursor: $cursor-disabled;
-  }
-}
-// These classes are used on elements with <label> descendants
-.radio,
-.checkbox {
-  &.disabled {
-    label {
-      cursor: $cursor-disabled;
-    }
-  }
-}
 
 
 // Form control feedback states

scss/_reboot.scss

@@ -321,6 +321,17 @@ textarea {
   border-radius: 0;
 }
 
+input[type="radio"],
+input[type="checkbox"] {
+  // Apply a disabled cursor for radios and checkboxes.
+  //
+  // Note: Neither radios nor checkboxes can be readonly.
+  &:disabled {
+    cursor: $cursor-disabled;
+  }
+}
+
+
 input[type="date"],
 input[type="time"],
 input[type="datetime-local"],