diff --git a/packages/ui-toolkit/package.json b/packages/ui-toolkit/package.json
index bcd32a6f..0b3ff6af 100644
--- a/packages/ui-toolkit/package.json
+++ b/packages/ui-toolkit/package.json
@@ -14,8 +14,7 @@
     "compile:es": "babel src --out-dir dist/es --ignore spec.js",
     "compile:umd": "UMD=1 babel src --out-dir dist/umd --ignore spec.js",
     "compile": "redrun -p compile:*",
-    "dev":
-      "NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
+    "dev": "NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
     "styleguide:build": "NODE_ENV=production styleguidist build",
     "styleguide": "NODE_ENV=development styleguidist server",
     "prepublish": "NODE_ENV=production npm run compile"
@@ -25,6 +24,7 @@
     "joy-react-broadcast": "^0.6.9",
     "joyent-icons": "^2.0.0",
     "lodash.isboolean": "^3.0.3",
+    "lodash.isundefined": "^3.0.1",
     "normalized-styled-components": "^1.0.17",
     "outy": "^0.1.2",
     "pascal-case": "^2.0.1",
diff --git a/packages/ui-toolkit/src/form/toggle.js b/packages/ui-toolkit/src/form/toggle.js
index d232156d..5742883b 100644
--- a/packages/ui-toolkit/src/form/toggle.js
+++ b/packages/ui-toolkit/src/form/toggle.js
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { Subscriber } from 'joy-react-broadcast';
 import remcalc from 'remcalc';
 import rndId from 'rnd-id';
+import isUndefined from 'lodash.isundefined';
 import Label from './label';
 import is from 'styled-is';
 
@@ -26,7 +27,7 @@ const Input = styled.input`
         left: 50%;
         box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.primary};
       }
-      
+
       &:active {
         box-shadow: none;
         &:after {
@@ -113,7 +114,7 @@ const InputLabel = styled.label`
       &:hover {
         border: ${remcalc(1)} solid ${props => props.theme.grey};
 
-        &:after { 
+        &:after {
           box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.grey};
         }
       }
@@ -122,18 +123,21 @@ const InputLabel = styled.label`
 
 const BaseToggle = BaseInput(({ children, ...rest }) => {
   const render = value => {
-    const id = rndId();
+    const checked =
+      isUndefined(rest.value) && isUndefined(rest.checked)
+        ? undefined
+        : rest.value === true || rest.checked === true;
+
     return (
       <InputContainer>
-        <Input {...value} {...rest} id={id} type="checkbox" />
+        <Input {...rest} checked={checked} type="checkbox" />
         <InputLabel
-          {...rest}
-          htmlFor={id}
+          htmlFor={rest.id}
           error={rest.error}
           warning={rest.warning}
           success={rest.success}
         />
-        <Label {...rest}> {children}</Label>
+        <Label> {children}</Label>
       </InputContainer>
     );
   };