Add bootstrap 4 compatibility for radios and checkboxes

Author: SampsonCrowley

src/components/widgets/CheckboxesWidget.js

@@ -22,32 +22,34 @@ function CheckboxesWidget(props) {
         const checked = value.indexOf(option.value) !== -1;
         const disabledCls = disabled || readonly ? "disabled" : "";
         const checkbox = (
-          <span>
-            <input
-              type="checkbox"
-              id={`${id}_${index}`}
-              checked={checked}
-              disabled={disabled || readonly}
-              autoFocus={autofocus && index === 0}
-              onChange={event => {
-                const all = enumOptions.map(({ value }) => value);
-                if (event.target.checked) {
-                  onChange(selectValue(option.value, value, all));
-                } else {
-                  onChange(deselectValue(option.value, value));
-                }
-              }}
-            />
-            <span>{option.label}</span>
-          </span>
+          <input
+            className="form-check-input"
+            type="checkbox"
+            id={`${id}_${index}`}
+            checked={checked}
+            disabled={disabled || readonly}
+            autoFocus={autofocus && index === 0}
+            onChange={event => {
+              const all = enumOptions.map(({ value }) => value);
+              if (event.target.checked) {
+                onChange(selectValue(option.value, value, all));
+              } else {
+                onChange(deselectValue(option.value, value));
+              }
+            }}
+          />
         );
         return inline
-          ? <label key={index} className={`checkbox-inline ${disabledCls}`}>
+          ? <label
+              key={index}
+              className={`checkbox-inline form-check form-check-label form-check-inline ${disabledCls}`}>
               {checkbox}
+              <span>{option.label}</span>
             </label>
-          : <div key={index} className={`checkbox ${disabledCls}`}>
-              <label>
+          : <div key={index} className={`checkbox form-check ${disabledCls}`}>
+              <label className="form-check-label">
                 {checkbox}
+                <span>{option.label}</span>
               </label>
             </div>;
       })}

src/components/widgets/RadioWidget.js

@@ -22,28 +22,30 @@ function RadioWidget(props) {
         const checked = option.value === value;
         const disabledCls = disabled || readonly ? "disabled" : "";
         const radio = (
-          <span>
-            <input
-              type="radio"
-              checked={checked}
-              name={name}
-              required={required}
-              value={option.value}
-              disabled={disabled || readonly}
-              autoFocus={autofocus && i === 0}
-              onChange={_ => onChange(option.value)}
-            />
-            <span>{option.label}</span>
-          </span>
+          <input
+            className="form-check-input"
+            type="radio"
+            checked={checked}
+            name={name}
+            required={required}
+            value={option.value}
+            disabled={disabled || readonly}
+            autoFocus={autofocus && i === 0}
+            onChange={_ => onChange(option.value)}
+          />
         );
 
         return inline
-          ? <label key={i} className={`radio-inline ${disabledCls}`}>
+          ? <label
+              key={i}
+              className={`radio-inline form-check form-check-label form-check-inline ${disabledCls}`}>
               {radio}
+              <span>{option.label}</span>
             </label>
-          : <div key={i} className={`radio ${disabledCls}`}>
-              <label>
+          : <div key={i} className={`radio form-check ${disabledCls}`}>
+              <label className="form-check-label">
                 {radio}
+                <span>{option.label}</span>
               </label>
             </div>;
       })}