diff --git a/docs/src/pages/demos/selection-controls/SwitchesGroup.tsx b/docs/src/pages/demos/selection-controls/SwitchesGroup.tsx
new file mode 100644
index 00000000000000..3243d7e35dad03
--- /dev/null
+++ b/docs/src/pages/demos/selection-controls/SwitchesGroup.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import FormLabel from '@material-ui/core/FormLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import Switch from '@material-ui/core/Switch';
+
+function SwitchesGroup() {
+  const [state, setState] = React.useState({
+    gilad: true,
+    jason: false,
+    antoine: true,
+  });
+
+  const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({ ...state, [name]: event.target.checked });
+  };
+
+  return (
+    <FormControl component="fieldset">
+      <FormLabel component="legend">Assign responsibility</FormLabel>
+      <FormGroup>
+        <FormControlLabel
+          control={<Switch checked={state.gilad} onChange={handleChange('gilad')} value="gilad" />}
+          label="Gilad Gray"
+        />
+        <FormControlLabel
+          control={<Switch checked={state.jason} onChange={handleChange('jason')} value="jason" />}
+          label="Jason Killian"
+        />
+        <FormControlLabel
+          control={
+            <Switch checked={state.antoine} onChange={handleChange('antoine')} value="antoine" />
+          }
+          label="Antoine Llorca"
+        />
+      </FormGroup>
+      <FormHelperText>Be careful</FormHelperText>
+    </FormControl>
+  );
+}
+
+export default SwitchesGroup;