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