[docs] Add CheckboxLabel TypeScript demo

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

@@ -9,7 +9,7 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import Favorite from '@material-ui/icons/Favorite';
 import FavoriteBorder from '@material-ui/icons/FavoriteBorder';
 
-const GreenCheckbox = withStyles({
+const styles = () => ({
   root: {
     '&:not($checked)': {
       color: green[400],
@@ -19,7 +19,9 @@ const GreenCheckbox = withStyles({
     },
   },
   checked: {},
-})(props => <Checkbox color="default" {...props} />);
+});
+
+const GreenCheckbox = withStyles(styles)(props => <Checkbox color="default" {...props} />);
 
 function CheckboxLabels() {
   const [state, setState] = React.useState({

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

@@ -0,0 +1,104 @@
+import React from 'react';
+import { withStyles, WithStyles, createStyles } 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 styles = () =>
+  createStyles({
+    root: {
+      '&:not($checked)': {
+        color: green[400],
+      },
+      '&$checked': {
+        color: green[600],
+      },
+    },
+    checked: {},
+  });
+
+interface Props extends WithStyles<typeof styles> {}
+
+const GreenCheckbox: React.ComponentType<CheckboxProps> = withStyles(styles)((props: Props) => (
+  <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;