[docs] Add CheckboxLabel TypeScript demo (#15237)

<!-- Thanks so much for your PR, your contribution is appreciated! ❤️ -->

- [x] I have followed (at least) the [PR section of the contributing guide](https://github.com/mui-org/material-ui/blob/next/CONTRIBUTING.md#submitting-a-pull-request).

docs/src/pages/demos/selection-controls/CheckboxLabels.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import green from '@material-ui/core/colors/green';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox';
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import Favorite from '@material-ui/icons/Favorite';
+import FavoriteBorder from '@material-ui/icons/FavoriteBorder';
+
+const GreenCheckbox = withStyles({
+  root: {
+    '&:not($checked)': {
+      color: green[400],
+    },
+    '&$checked': {
+      color: green[600],
+    },
+  },
+  checked: {},
+})((props: CheckboxProps) => <Checkbox color="default" {...props} />);
+
+function CheckboxLabels() {
+  const [state, setState] = React.useState({
+    checkedA: true,
+    checkedB: true,
+    checkedF: true,
+    checkedG: true,
+  });
+
+  const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({ ...state, [name]: event.target.checked });
+  };
+
+  return (
+    <FormGroup row>
+      <FormControlLabel
+        control={
+          <Checkbox checked={state.checkedA} onChange={handleChange('checkedA')} value="checkedA" />
+        }
+        label="Secondary"
+      />
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={state.checkedB}
+            onChange={handleChange('checkedB')}
+            value="checkedB"
+            color="primary"
+          />
+        }
+        label="Primary"
+      />
+      <FormControlLabel control={<Checkbox value="checkedC" />} label="Uncontrolled" />
+      <FormControlLabel disabled control={<Checkbox value="checkedD" />} label="Disabled" />
+      <FormControlLabel disabled control={<Checkbox checked value="checkedE" />} label="Disabled" />
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={state.checkedF}
+            onChange={handleChange('checkedF')}
+            value="checkedF"
+            indeterminate
+          />
+        }
+        label="Indeterminate"
+      />
+      <FormControlLabel
+        control={
+          <GreenCheckbox
+            checked={state.checkedG}
+            onChange={handleChange('checkedG')}
+            value="checkedG"
+          />
+        }
+        label="Custom color"
+      />
+      <FormControlLabel
+        control={<Checkbox icon={<FavoriteBorder />} checkedIcon={<Favorite />} value="checkedH" />}
+        label="Custom icon"
+      />
+      <FormControlLabel
+        control={
+          <Checkbox
+            icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
+            checkedIcon={<CheckBoxIcon fontSize="small" />}
+            value="checkedI"
+          />
+        }
+        label="Custom size"
+      />
+    </FormGroup>
+  );
+}
+
+export default CheckboxLabels;