Improve checkbox and radio button styles (#403)

rjsf-team · Nov 21, 2016 · e1738ed · e1738ed
1 parent 8bceb45
commit e1738ed
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 26 deletions.
diff --git a/src/components/widgets/CheckboxesWidget.js b/src/components/widgets/CheckboxesWidget.js
@@ -20,23 +20,33 @@ function CheckboxesWidget(props) {
     <div className="checkboxes" id={id}>{
       enumOptions.map((option, index) => {
         const checked = value.indexOf(option.value) !== -1;
-        return (
-          <div key={index} className={`checkbox${inline ? "-inline" : ""}`}>
+        const disabledCls = disabled ? "disabled" : "";
+        const checkbox = (
+          <span>
+            <input type="checkbox"
+              id={`${id}_${index}`}
+              checked={checked}
+              disabled={disabled}
+              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));
+                }
+              }}/>
+            {option.label}
+          </span>
+        );
+        return inline ? (
+          <label key={index} className={`checkbox-inline ${disabledCls}`}>
+            {checkbox}
+          </label>
+        ) : (
+          <div key={index} className={`checkbox ${disabledCls}`}>
             <label>
-              <input type="checkbox"
-                id={`${id}_${index}`}
-                checked={checked}
-                disabled={disabled}
-                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));
-                  }
-                }}/>
-              <strong>{option.label}</strong>
+              {checkbox}
             </label>
           </div>
         );

diff --git a/src/components/widgets/RadioWidget.js b/src/components/widgets/RadioWidget.js
@@ -17,17 +17,28 @@ function RadioWidget({
     <div className="field-radio-group">{
       enumOptions.map((option, i) => {
         const checked = option.value === value;
-        return (
-          <div key={i} className={`radio${inline ? "-inline" : ""} ${disabled ? "disabled" : ""}`}>
+        const disabledCls = disabled ? "disabled" : "";
+        const radio = (
+          <span>
+            <input type="radio"
+              name={name}
+              value={option.value}
+              checked={checked}
+              disabled={disabled}
+              autoFocus={autofocus && i === 0}
+              onChange={_ => onChange(option.value)}/>
+            {option.label}
+          </span>
+        );
+
+        return inline ? (
+          <label key={i} className={`radio-inline ${disabledCls}`}>
+            {radio}
+          </label>
+        ) : (
+          <div key={i} className={`radio ${disabledCls}`}>
             <label>
-              <input type="radio"
-                name={name}
-                value={option.value}
-                checked={checked}
-                disabled={disabled}
-                autoFocus={autofocus && i === 0}
-                onChange={_ => onChange(option.value)}/>
-              {option.label}
+              {radio}
             </label>
           </div>
         );