From a61b12078f91530b3ec4be8f338b6b5330b8a2bd Mon Sep 17 00:00:00 2001
From: Brandon Herrera <brandonherrera@Brandons-MacBook-Air-3.local>
Date: Fri, 19 Apr 2019 02:10:58 -0400
Subject: [PATCH] Add TypeScript demo for SwitchLabels componenet

---
 .../demos/selection-controls/SwitchLabels.tsx | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 docs/src/pages/demos/selection-controls/SwitchLabels.tsx

diff --git a/docs/src/pages/demos/selection-controls/SwitchLabels.tsx b/docs/src/pages/demos/selection-controls/SwitchLabels.tsx
new file mode 100644
index 00000000000000..d71e1f5a3b4347
--- /dev/null
+++ b/docs/src/pages/demos/selection-controls/SwitchLabels.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+
+function SwitchLabels() {
+  const [state, setState] = React.useState({
+    checkedA: true,
+    checkedB: true,
+  });
+
+  const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({ ...state, [name]: event.target.checked });
+  };
+
+  return (
+    <FormGroup row>
+      <FormControlLabel
+        control={
+          <Switch checked={state.checkedA} onChange={handleChange('checkedA')} value="checkedA" />
+        }
+        label="Secondary"
+      />
+      <FormControlLabel
+        control={
+          <Switch
+            checked={state.checkedB}
+            onChange={handleChange('checkedB')}
+            value="checkedB"
+            color="primary"
+          />
+        }
+        label="Primary"
+      />
+      <FormControlLabel control={<Switch value="checkedC" />} label="Uncontrolled" />
+      <FormControlLabel disabled control={<Switch value="checkedD" />} label="Disabled" />
+      <FormControlLabel disabled control={<Switch checked value="checkedE" />} label="Disabled" />
+    </FormGroup>
+  );
+}
+
+export default SwitchLabels;