diff --git a/src/component/index.js b/src/component/index.js
index c5c764f..9b13367 100644
--- a/src/component/index.js
+++ b/src/component/index.js
@@ -103,13 +103,9 @@ export default class Toggle extends PureComponent {
   }
 
   handleFocus (event) {
-    const { onFocus } = this.props
-
-    if (onFocus) {
-      onFocus(event)
-    }
-
-    this.setState({ hasFocus: true })
+    this.props.onFocus(event)
+    this.setState({ ...this.state, hasFocus: true })
+    console.log('event: ', event)
   }
 
   handleBlur (event) {
diff --git a/src/docs/index.js b/src/docs/index.js
index 5af1c7a..5964ac4 100644
--- a/src/docs/index.js
+++ b/src/docs/index.js
@@ -52,9 +52,12 @@ class App extends Component {
       burritoIsReady: false,
       toastIsReady: false,
       formData: {},
+      loading: false,
     }
   }
-
+  handleTogglechange () {
+    this.setState({ loading: !this.state.loading })
+  };
   handleResetProps () {
     this.setState({ checkedOverride: !this.state.checkedOverride })
   }
@@ -140,7 +143,21 @@ class App extends Component {
             this.state.cheeseIsReady: {JSON.stringify(this.state.cheeseIsReady)}
           </pre>
         </div>
+        {/* disable example */}
+        <div className='example'>
+          <Toggle disabled={this.state.loading} onChange={this.handleTogglechange} />
+          <label htmlFor='cheese-status'>Desable example</label>
 
+          <pre>
+            {`<Toggle 
+  disabled={this.state.loading} 
+  onChange={this.handleTogglechange} />`}
+          </pre>
+          <pre>
+            this.state.loading:{' '}
+            {JSON.stringify(this.state.loading)}
+          </pre>
+        </div>
         {/* Biscuit */}
 
         <div className='example'>