checkboxes and radios (default and inline) are working. radio refactoring seems complete.

Gruntfile.js

@@ -111,7 +111,7 @@ module.exports = function (grunt) {
         },
         files: {
           'dist/js/babel/baseInput.js': 'js/src/baseInput.js',
-          'dist/js/babel/baseToggle.js': 'js/src/baseToggle.js',
+          'dist/js/babel/baseSelection.js': 'js/src/baseSelection.js',
           'dist/js/babel/util.js': 'js/src/util.js',
           'dist/js/babel/ripples.js': 'js/src/ripples.js',
           'dist/js/babel/autofill.js': 'js/src/autofill.js',
@@ -138,7 +138,7 @@ module.exports = function (grunt) {
 
           // generate core so we have local debugging
           'docs/dist/js/babel/baseInput.js': 'js/src/baseInput.js',
-          'docs/dist/js/babel/baseToggle.js': 'js/src/baseToggle.js',
+          'docs/dist/js/babel/baseSelection.js': 'js/src/baseSelection.js',
           'docs/dist/js/babel/util.js': 'js/src/util.js',
           'docs/dist/js/babel/ripples.js': 'js/src/ripples.js',
           'docs/dist/js/babel/autofill.js': 'js/src/autofill.js',
@@ -168,7 +168,7 @@ module.exports = function (grunt) {
         },
         files: {
           'dist/js/umd/baseInput.js': 'js/src/baseInput.js',
-          'dist/js/umd/baseToggle.js': 'js/src/baseToggle.js',
+          'dist/js/umd/baseSelection.js': 'js/src/baseSelection.js',
           'dist/js/umd/util.js': 'js/src/util.js',
           'dist/js/umd/ripples.js': 'js/src/ripples.js',
           'dist/js/umd/autofill.js': 'js/src/autofill.js',
@@ -234,7 +234,7 @@ module.exports = function (grunt) {
       bootstrap: {
         src: [
           'dist/js/babel/baseInput.js',
-          'dist/js/babel/baseToggle.js',
+          'dist/js/babel/baseSelection.js',
           'dist/js/babel/util.js',
           'dist/js/babel/ripples.js',
           'dist/js/babel/autofill.js',

docs/material-design/test.md

@@ -4,6 +4,27 @@ title: Test
 group: material-design
 ---
 
+## Switches
+
+{% example html %}
+<form>
+  <div class="switch">
+    <label>
+      Wi-Fi
+      <input type="checkbox" checked>
+    </label>
+  </div>
+  <div class="switch">
+    <label>
+      Bluetooth
+      <input type="checkbox">
+    </label>
+  </div>
+</form>
+{% endexample %}
+
+## Radios
+
 {% example html %}
 <form>
   <div class="radio">
@@ -34,12 +55,38 @@ group: material-design
   <label class="radio-inline">
     <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
   </label>   
+</form>
+{% endexample %}
 
+## Checkboxes 
 
+{% example html %}
+<form>  
   <div class="checkbox">
     <label>
       <input type="checkbox"> Check me out
     </label>
   </div>   
+  <div class="checkbox">
+    <label>
+      <input type="checkbox" value="" checked>
+      Option one is this and that&mdash;be sure to include why it's great
+    </label>
+  </div>
+  <div class="checkbox disabled">
+    <label>
+      <input type="checkbox" value="" disabled>
+      Option two is disabled
+    </label>
+  </div>    
+  <label class="checkbox-inline">
+    <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
+  </label>
+  <label class="checkbox-inline">
+    <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
+  </label>
+  <label class="checkbox-inline">
+    <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
+  </label>  
 </form>
 {% endexample %}

grunt/configBridge.json

@@ -10,7 +10,7 @@
 
     "coreJs": [
       "../dist/js/babel/baseInput.js",
-      "../dist/js/babel/baseToggle.js",
+      "../dist/js/babel/baseSelection.js",
       "../dist/js/babel/autofill.js",
       "../dist/js/babel/bootstrapMaterialDesign.js",
       "../dist/js/babel/checkbox.js",

js/src/baseInput.js

@@ -27,7 +27,8 @@ const BaseInput = (($) => {
     },
     mdbFormGroup: {
       template: `<span class='mdb-form-group'></span>`,
-      omit: false // inline components really dislike any mdb-form-group
+      create: true, // create a wrapper if form-group not found
+      required: true // not recommended to turn this off, only used for inline components
     },
     mdbLabel: {
       required: false,
@@ -92,9 +93,7 @@ const BaseInput = (($) => {
       // Will add mdb-form-group to form-group or create an mdb-form-group
       //  Performance Note: for those forms that are really performance driven, create the markup with the .mdb-form-group to avoid
       //    rendering changes once added.
-      if (!this.config.mdbFormGroup.omit) {
       this.$mdbFormGroup = this.resolveMdbFormGroup()
-      }
 
       // Resolve and mark the mdbLabel if necessary as defined by the config
       this.$mdbLabel = this.resolveMdbLabel()
@@ -198,7 +197,7 @@ const BaseInput = (($) => {
     resolveMdbFormGroup() {
       let mfg = this.findMdbFormGroup(false)
       if (mfg === undefined || mfg.length === 0) {
-        if (this.$formGroup === undefined || this.$formGroup.length === 0) {
+        if (this.config.mdbFormGroup.create && (this.$formGroup === undefined || this.$formGroup.length === 0)) {
           // If a form-group doesn't exist (not recommended), take a guess and wrap the element (assuming no label).
           //  note: it's possible to make this smarter, but I need to see valid cases before adding any complexity.
           this.outerElement().wrap(this.config.mdbFormGroup.template)
@@ -211,7 +210,7 @@ const BaseInput = (($) => {
           //fg.wrapInner(this.config.mdbFormGroup.template)
         }
 
-        mfg = this.findMdbFormGroup(true)
+        mfg = this.findMdbFormGroup(this.config.mdbFormGroup.required)
       }
 
       return mfg

js/src/baseSelection.js

@@ -1,7 +1,7 @@
 import BaseInput from './baseInput'
 import Util from './util'
 
-const BaseToggle = (($) => {
+const BaseSelection = (($) => {
 
   /**
    * ------------------------------------------------------------------------
@@ -34,7 +34,7 @@ const BaseToggle = (($) => {
    * Class Definition
    * ------------------------------------------------------------------------
    */
-  class BaseToggle extends BaseInput {
+  class BaseSelection extends BaseInput {
 
     constructor($element, config, properties) {
       // properties = {inputType: checkbox, outerClass: checkbox-inline}
@@ -86,8 +86,8 @@ const BaseToggle = (($) => {
     // private
   }
 
-  return BaseToggle
+  return BaseSelection
 
 })(jQuery)
 
-export default BaseToggle
+export default BaseSelection

js/src/checkbox.js

@@ -1,4 +1,4 @@
-import BaseToggle from './baseToggle'
+import BaseSelection from './baseSelection'
 import Text from './text'
 import File from './file'
 import Radio from './radio'
@@ -27,7 +27,7 @@ const Checkbox = (($) => {
    * Class Definition
    * ------------------------------------------------------------------------
    */
-  class Checkbox extends BaseToggle {
+  class Checkbox extends BaseSelection {
 
     constructor($element, config, properties = {inputType: NAME, outerClass: NAME}) {
       super($element, $.extend(true, {

js/src/checkboxInline.js

@@ -14,7 +14,8 @@ const CheckboxInline = (($) => {
 
   const Default = {
     mdbFormGroup: {
-      omit: true
+      create: false, // no mdb-form-group creation if form-group not present. It messes with the layout.
+      required: false
     }
   }
 

js/src/radio.js

@@ -1,4 +1,4 @@
-import BaseToggle from './baseToggle'
+import BaseSelection from './baseSelection'
 import Text from './text'
 import File from './file'
 import Checkbox from './checkbox'
@@ -26,7 +26,7 @@ const Radio = (($) => {
    * Class Definition
    * ------------------------------------------------------------------------
    */
-  class Radio extends BaseToggle {
+  class Radio extends BaseSelection {
 
     constructor($element, config, properties = {inputType: NAME, outerClass: NAME}) {
       super($element, $.extend(true, {

js/src/radioInline.js

@@ -14,7 +14,8 @@ const RadioInline = (($) => {
 
   const Default = {
     mdbFormGroup: {
-      omit: true
+      create: false, // no mdb-form-group creation if form-group not present. It messes with the layout.
+      required: false
     }
   }
 

scss/_checkboxes.scss

@@ -1,8 +1,6 @@
 // http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
-label.checkbox,
-label.checkbox-inline,
 .checkbox label,
-.checkbox-inline label {
+label.checkbox-inline {
   padding-left: 0; // Reset for Bootstrap rule
   cursor: pointer;
 
@@ -114,14 +112,6 @@ label.checkbox-inline,
     }
   }
 
-  // Style for disabled inputs
-  fieldset[disabled] &,
-  fieldset[disabled] & input[type=checkbox],
-  input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check::before,
-  input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check,
-  input[type=checkbox][disabled] + .mdb-radio-outer-circle {
-    opacity: 0.5;
-  }
   input[type=checkbox][disabled] + .checkbox-decorator .check::after {
     background-color: $mdb-text-color-primary;
     transform: rotate(-45deg);

scss/_forms.scss

@@ -71,7 +71,7 @@ form {
 // -----
 // State coloring: default, success, info, warning, danger
 //
-@include mdb-toggle-color();
+@include mdb-selection-color();
 @include mdb-form-color($mdb-label-color, $mdb-label-color-focus, $input-border-color);
 
 .has-success {

scss/_radios.scss

@@ -1,31 +1,30 @@
-label.radio,
+.radio label span {
-label.radio-inline,
+  top: 0;
+}
+label.radio-inline span {
+  top: (($line-height * $font-size-base) - $mdb-radio-size) / 2;
+}
+
 .radio label,
-.radio-inline label {
+label.radio-inline {
   position: relative;
-  //padding-left: 2rem;
-  cursor: pointer;
 
   span {
     position: absolute;
-    top: $mdb-radio-border;
-    //left: 10px;
     left: 0;
     display: block;
+    width: $mdb-radio-size;
+    height: $mdb-radio-size;
     transition-duration: 0.2s;
 
     &.mdb-radio-outer-circle {
-      width: $mdb-radio-size;
-      height: $mdb-radio-size;
       border: $mdb-radio-border solid $mdb-radio-color-off;
       border-radius: 100%;
     }
     &.mdb-radio-inner-circle {
       display: inline-block;
-      width: $mdb-radio-size;
-      height: $mdb-radio-size;
       background-color: $mdb-radio-color-on;
-      border-radius: 100%;
+      border-radius: 50%;
       transform: scale3d(0, 0, 0);
 
       // focus/press ripple
@@ -39,7 +38,7 @@ label.radio-inline,
         height: 50px;
         margin: 0;
         content: "";
-        background-color: $mdb-text-color-primary;
+        background-color: $gray-dark;
         border-radius: 100%;
         opacity: 0;
         transform: scale3d(1.5, 1.5, 1);
@@ -68,7 +67,8 @@ label.radio-inline,
       animation: rippleOff 500ms;
     }
 
-    &[disabled] {
+    &[disabled],
+    fieldset[disabled] & {
       @include mdb-radio-color($mdb-radio-color-disabled);
 
       .theme-dark & {

scss/mixins/_forms.scss

@@ -1,11 +1,14 @@
-@mixin mdb-toggle-color() {
+@mixin mdb-selection-color() {
   .radio label,
+  .radio-inline,
   .checkbox label,
+  .checkbox-inline,
   .switch label {
 
     // override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
-    color: $mdb-label-color;
+    //color: $mdb-label-color;
 
+    &,
     .is-focused & {
       // form-group focus could change multiple checkboxes/radios, disable that change by using the same color as non-form-group is-focused
       color: $mdb-label-color;
@@ -17,20 +20,31 @@
       }
 
       // correct the above focus color for disabled items
+      label:has(input[type=radio][disabled]),     // css 4 which is unlikely to work for a while, but no other pure css way.
+      label:has(input[type=checkbox][disabled]),  // css 4
       fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus {
           color: $mdb-label-color;
         }
       }
     }
+  }
+
+  // Style for disabled inputs  OLD, use color approach with opacity built in, see radios
+  //fieldset[disabled] &,
+  //fieldset[disabled] & input[type=checkbox],
+  //input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check::before,
+  //input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check,
+  //input[type=checkbox][disabled] + .mdb-radio-outer-circle {
+  //  opacity: 0.5;
+  //}
 }
 
 @mixin mdb-radio-color($color) {
-  //~ .check,
-  //~ .mdb-radio-outer-circle {
-  //  opacity: $opacity;
-  //}
 
-  ~ .check {
+  ~ .mdb-radio-inner-circle {
     background-color: $color;
   }