From 509b2502ef8974f089ce0f66bb2079e8705bc1bd Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Wed, 17 Mar 2021 14:27:00 -0300
Subject: [PATCH 01/13] docs: Migrate indeterminate checkbox  demo to emotion

---
 .../checkboxes/IndeterminateCheckbox.js           | 15 +++------------
 .../checkboxes/IndeterminateCheckbox.tsx          | 15 +++------------
 2 files changed, 6 insertions(+), 24 deletions(-)

diff --git a/docs/src/pages/components/checkboxes/IndeterminateCheckbox.js b/docs/src/pages/components/checkboxes/IndeterminateCheckbox.js
index 3719fed69d9af1..fa35db8fc5cc09 100644
--- a/docs/src/pages/components/checkboxes/IndeterminateCheckbox.js
+++ b/docs/src/pages/components/checkboxes/IndeterminateCheckbox.js
@@ -1,18 +1,9 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
-const useStyles = makeStyles((theme) => ({
-  children: {
-    display: 'flex',
-    flexDirection: 'column',
-    marginLeft: theme.spacing(3),
-  },
-}));
-
 export default function IndeterminateCheckbox() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState([true, false]);
 
   const handleChange1 = (event) => {
@@ -28,7 +19,7 @@ export default function IndeterminateCheckbox() {
   };
 
   const children = (
-    <div className={classes.children}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
       <FormControlLabel
         label="Child 1"
         control={
@@ -41,7 +32,7 @@ export default function IndeterminateCheckbox() {
           <Checkbox checked={checked[1]} color="primary" onChange={handleChange3} />
         }
       />
-    </div>
+    </Box>
   );
 
   return (
diff --git a/docs/src/pages/components/checkboxes/IndeterminateCheckbox.tsx b/docs/src/pages/components/checkboxes/IndeterminateCheckbox.tsx
index 7af5ed0f72ac16..62d8aa89d08ef2 100644
--- a/docs/src/pages/components/checkboxes/IndeterminateCheckbox.tsx
+++ b/docs/src/pages/components/checkboxes/IndeterminateCheckbox.tsx
@@ -1,18 +1,9 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
-const useStyles = makeStyles((theme) => ({
-  children: {
-    display: 'flex',
-    flexDirection: 'column',
-    marginLeft: theme.spacing(3),
-  },
-}));
-
 export default function IndeterminateCheckbox() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState([true, false]);
 
   const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -28,7 +19,7 @@ export default function IndeterminateCheckbox() {
   };
 
   const children = (
-    <div className={classes.children}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
       <FormControlLabel
         label="Child 1"
         control={
@@ -41,7 +32,7 @@ export default function IndeterminateCheckbox() {
           <Checkbox checked={checked[1]} color="primary" onChange={handleChange3} />
         }
       />
-    </div>
+    </Box>
   );
 
   return (

From 85d64d2743612710356f90556c2da3287541d6e5 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Wed, 17 Mar 2021 14:27:18 -0300
Subject: [PATCH 02/13] docs: Migrate label checkbox  demo to emotion

---
 .../components/checkboxes/CheckboxLabels.js     | 13 ++++++-------
 .../components/checkboxes/CheckboxLabels.tsx    | 17 ++++++++---------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.js b/docs/src/pages/components/checkboxes/CheckboxLabels.js
index df870497e042d8..9d738a443a486e 100644
--- a/docs/src/pages/components/checkboxes/CheckboxLabels.js
+++ b/docs/src/pages/components/checkboxes/CheckboxLabels.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import { green } from '@material-ui/core/colors';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -9,15 +9,14 @@ 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: {
+const GreenCheckbox = styled((props) => <Checkbox color="default" {...props} />)(
+  () => ({
     color: green[400],
-    '&$checked': {
+    '&.Mui-checked': {
       color: green[600],
     },
-  },
-  checked: {},
-})((props) => <Checkbox color="default" {...props} />);
+  }),
+);
 
 export default function CheckboxLabels() {
   const [state, setState] = React.useState({
diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.tsx b/docs/src/pages/components/checkboxes/CheckboxLabels.tsx
index 09c88d970d50c3..6e4c4fc7c6f5c0 100644
--- a/docs/src/pages/components/checkboxes/CheckboxLabels.tsx
+++ b/docs/src/pages/components/checkboxes/CheckboxLabels.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import { green } from '@material-ui/core/colors';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -9,15 +9,14 @@ 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: {
-    color: green[400],
-    '&$checked': {
-      color: green[600],
-    },
+const GreenCheckbox = styled((props: CheckboxProps) => (
+  <Checkbox color="default" {...props} />
+))(() => ({
+  color: green[400],
+  '&.Mui-checked': {
+    color: green[600],
   },
-  checked: {},
-})((props: CheckboxProps) => <Checkbox color="default" {...props} />);
+}));
 
 export default function CheckboxLabels() {
   const [state, setState] = React.useState({

From 18125b7d5ef502b7b47f76c6ae78eca6f66bf4e5 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Wed, 17 Mar 2021 14:27:55 -0300
Subject: [PATCH 03/13] docs: Migrate form group checkbox  demo to emotion

---
 .../components/checkboxes/CheckboxesGroup.js  | 25 ++++-------------
 .../components/checkboxes/CheckboxesGroup.tsx | 27 ++++---------------
 2 files changed, 10 insertions(+), 42 deletions(-)

diff --git a/docs/src/pages/components/checkboxes/CheckboxesGroup.js b/docs/src/pages/components/checkboxes/CheckboxesGroup.js
index d7641968c2424d..4f7c427cb439d2 100644
--- a/docs/src/pages/components/checkboxes/CheckboxesGroup.js
+++ b/docs/src/pages/components/checkboxes/CheckboxesGroup.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import FormLabel from '@material-ui/core/FormLabel';
 import FormControl from '@material-ui/core/FormControl';
 import FormGroup from '@material-ui/core/FormGroup';
@@ -7,17 +7,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import Checkbox from '@material-ui/core/Checkbox';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-  },
-  formControl: {
-    margin: theme.spacing(3),
-  },
-}));
-
 export default function CheckboxesGroup() {
-  const classes = useStyles();
   const [state, setState] = React.useState({
     gilad: true,
     jason: false,
@@ -35,8 +25,8 @@ export default function CheckboxesGroup() {
   const error = [gilad, jason, antoine].filter((v) => v).length !== 2;
 
   return (
-    <div className={classes.root}>
-      <FormControl component="fieldset" className={classes.formControl}>
+    <Box sx={{ display: 'flex' }}>
+      <FormControl sx={{ m: 3 }} component="fieldset">
         <FormLabel component="legend">Assign responsibility</FormLabel>
         <FormGroup>
           <FormControlLabel
@@ -60,12 +50,7 @@ export default function CheckboxesGroup() {
         </FormGroup>
         <FormHelperText>Be careful</FormHelperText>
       </FormControl>
-      <FormControl
-        required
-        error={error}
-        component="fieldset"
-        className={classes.formControl}
-      >
+      <FormControl required error={error} component="fieldset" sx={{ m: 3 }}>
         <FormLabel component="legend">Pick two</FormLabel>
         <FormGroup>
           <FormControlLabel
@@ -89,6 +74,6 @@ export default function CheckboxesGroup() {
         </FormGroup>
         <FormHelperText>You can display an error</FormHelperText>
       </FormControl>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx b/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx
index bbf0eb5f633ca9..89724399874d1a 100644
--- a/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx
+++ b/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import FormLabel from '@material-ui/core/FormLabel';
 import FormControl from '@material-ui/core/FormControl';
 import FormGroup from '@material-ui/core/FormGroup';
@@ -7,19 +7,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import Checkbox from '@material-ui/core/Checkbox';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-    },
-    formControl: {
-      margin: theme.spacing(3),
-    },
-  }),
-);
-
 export default function CheckboxesGroup() {
-  const classes = useStyles();
   const [state, setState] = React.useState({
     gilad: true,
     jason: false,
@@ -37,8 +25,8 @@ export default function CheckboxesGroup() {
   const error = [gilad, jason, antoine].filter((v) => v).length !== 2;
 
   return (
-    <div className={classes.root}>
-      <FormControl component="fieldset" className={classes.formControl}>
+    <Box sx={{ display: 'flex' }}>
+      <FormControl sx={{ m: 3 }} component="fieldset">
         <FormLabel component="legend">Assign responsibility</FormLabel>
         <FormGroup>
           <FormControlLabel
@@ -62,12 +50,7 @@ export default function CheckboxesGroup() {
         </FormGroup>
         <FormHelperText>Be careful</FormHelperText>
       </FormControl>
-      <FormControl
-        required
-        error={error}
-        component="fieldset"
-        className={classes.formControl}
-      >
+      <FormControl required error={error} component="fieldset" sx={{ m: 3 }}>
         <FormLabel component="legend">Pick two</FormLabel>
         <FormGroup>
           <FormControlLabel
@@ -91,6 +74,6 @@ export default function CheckboxesGroup() {
         </FormGroup>
         <FormHelperText>You can display an error</FormHelperText>
       </FormControl>
-    </div>
+    </Box>
   );
 }

From 06966c2689635735d9953f1126bcff820620a42a Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Wed, 17 Mar 2021 14:28:16 -0300
Subject: [PATCH 04/13] docs: Migrate customized checkbox demo to emotion

---
 .../checkboxes/CustomizedCheckbox.js          | 81 +++++++++----------
 .../checkboxes/CustomizedCheckbox.tsx         | 81 +++++++++----------
 2 files changed, 74 insertions(+), 88 deletions(-)

diff --git a/docs/src/pages/components/checkboxes/CustomizedCheckbox.js b/docs/src/pages/components/checkboxes/CustomizedCheckbox.js
index 8051bb7a21a2f6..b98515e3f1b40a 100644
--- a/docs/src/pages/components/checkboxes/CustomizedCheckbox.js
+++ b/docs/src/pages/components/checkboxes/CustomizedCheckbox.js
@@ -1,63 +1,56 @@
 import * as React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Checkbox from '@material-ui/core/Checkbox';
 
-const useStyles = makeStyles({
-  root: {
-    '&:hover': {
-      backgroundColor: 'transparent',
-    },
+const Icon = styled('span')({
+  borderRadius: 3,
+  width: 16,
+  height: 16,
+  boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
+  backgroundColor: '#f5f8fa',
+  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
+  '.root.Mui-focusVisible &': {
+    outline: '2px auto rgba(19,124,189,.6)',
+    outlineOffset: 2,
   },
-  icon: {
-    borderRadius: 3,
+  'input:hover ~ &': {
+    backgroundColor: '#ebf1f5',
+  },
+  'input:disabled ~ &': {
+    boxShadow: 'none',
+    background: 'rgba(206,217,224,.5)',
+  },
+});
+
+const CheckedIcon = styled(Icon)({
+  backgroundColor: '#137cbd',
+  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
+  '&:before': {
+    display: 'block',
     width: 16,
     height: 16,
-    boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
-    backgroundColor: '#f5f8fa',
-    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
-    '$root.Mui-focusVisible &': {
-      outline: '2px auto rgba(19,124,189,.6)',
-      outlineOffset: 2,
-    },
-    'input:hover ~ &': {
-      backgroundColor: '#ebf1f5',
-    },
-    'input:disabled ~ &': {
-      boxShadow: 'none',
-      background: 'rgba(206,217,224,.5)',
-    },
+    backgroundImage:
+      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
+      " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
+      "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
+    content: '""',
   },
-  checkedIcon: {
-    backgroundColor: '#137cbd',
-    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-    '&:before': {
-      display: 'block',
-      width: 16,
-      height: 16,
-      backgroundImage:
-        "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
-        " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
-        "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
-      content: '""',
-    },
-    'input:hover ~ &': {
-      backgroundColor: '#106ba3',
-    },
+  'input:hover ~ &': {
+    backgroundColor: '#106ba3',
   },
 });
 
 // Inspired by blueprintjs
 function StyledCheckbox(props) {
-  const classes = useStyles();
-
   return (
     <Checkbox
-      className={classes.root}
+      sx={{
+        '&:hover': { bgcolor: 'transparent' },
+      }}
       disableRipple
       color="default"
-      checkedIcon={<span className={clsx(classes.icon, classes.checkedIcon)} />}
-      icon={<span className={classes.icon} />}
+      checkedIcon={<CheckedIcon />}
+      icon={<Icon />}
       inputProps={{ 'aria-label': 'decorative checkbox' }}
       {...props}
     />
diff --git a/docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx b/docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx
index 95bce25daded9d..88b176ffe47781 100644
--- a/docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx
+++ b/docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx
@@ -1,63 +1,56 @@
 import * as React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox';
 
-const useStyles = makeStyles({
-  root: {
-    '&:hover': {
-      backgroundColor: 'transparent',
-    },
+const Icon = styled('span')({
+  borderRadius: 3,
+  width: 16,
+  height: 16,
+  boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
+  backgroundColor: '#f5f8fa',
+  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
+  '.root.Mui-focusVisible &': {
+    outline: '2px auto rgba(19,124,189,.6)',
+    outlineOffset: 2,
   },
-  icon: {
-    borderRadius: 3,
+  'input:hover ~ &': {
+    backgroundColor: '#ebf1f5',
+  },
+  'input:disabled ~ &': {
+    boxShadow: 'none',
+    background: 'rgba(206,217,224,.5)',
+  },
+});
+
+const CheckedIcon = styled(Icon)({
+  backgroundColor: '#137cbd',
+  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
+  '&:before': {
+    display: 'block',
     width: 16,
     height: 16,
-    boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
-    backgroundColor: '#f5f8fa',
-    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
-    '$root.Mui-focusVisible &': {
-      outline: '2px auto rgba(19,124,189,.6)',
-      outlineOffset: 2,
-    },
-    'input:hover ~ &': {
-      backgroundColor: '#ebf1f5',
-    },
-    'input:disabled ~ &': {
-      boxShadow: 'none',
-      background: 'rgba(206,217,224,.5)',
-    },
+    backgroundImage:
+      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
+      " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
+      "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
+    content: '""',
   },
-  checkedIcon: {
-    backgroundColor: '#137cbd',
-    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-    '&:before': {
-      display: 'block',
-      width: 16,
-      height: 16,
-      backgroundImage:
-        "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
-        " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
-        "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
-      content: '""',
-    },
-    'input:hover ~ &': {
-      backgroundColor: '#106ba3',
-    },
+  'input:hover ~ &': {
+    backgroundColor: '#106ba3',
   },
 });
 
 // Inspired by blueprintjs
 function StyledCheckbox(props: CheckboxProps) {
-  const classes = useStyles();
-
   return (
     <Checkbox
-      className={classes.root}
+      sx={{
+        '&:hover': { bgcolor: 'transparent' },
+      }}
       disableRipple
       color="default"
-      checkedIcon={<span className={clsx(classes.icon, classes.checkedIcon)} />}
-      icon={<span className={classes.icon} />}
+      checkedIcon={<CheckedIcon />}
+      icon={<Icon />}
       inputProps={{ 'aria-label': 'decorative checkbox' }}
       {...props}
     />

From b5f9577c4b2237442ff8d00c294d9d5ac94b4c66 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Thu, 18 Mar 2021 10:22:05 -0300
Subject: [PATCH 05/13] Fix focusVisible

---
 .../src/pages/components/checkboxes/CustomizedCheckbox.js | 8 ++++----
 .../pages/components/checkboxes/CustomizedCheckbox.tsx    | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/src/pages/components/checkboxes/CustomizedCheckbox.js b/docs/src/pages/components/checkboxes/CustomizedCheckbox.js
index b98515e3f1b40a..0b61e702103b85 100644
--- a/docs/src/pages/components/checkboxes/CustomizedCheckbox.js
+++ b/docs/src/pages/components/checkboxes/CustomizedCheckbox.js
@@ -9,14 +9,14 @@ const Icon = styled('span')({
   boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
   backgroundColor: '#f5f8fa',
   backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
-  '.root.Mui-focusVisible &': {
+  '.Mui-focusVisible &': {
     outline: '2px auto rgba(19,124,189,.6)',
     outlineOffset: 2,
   },
-  'input:hover ~ &': {
+  '& input:hover ~ &': {
     backgroundColor: '#ebf1f5',
   },
-  'input:disabled ~ &': {
+  '& input:disabled ~ &': {
     boxShadow: 'none',
     background: 'rgba(206,217,224,.5)',
   },
@@ -35,7 +35,7 @@ const CheckedIcon = styled(Icon)({
       "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
     content: '""',
   },
-  'input:hover ~ &': {
+  '& input:hover ~ &': {
     backgroundColor: '#106ba3',
   },
 });
diff --git a/docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx b/docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx
index 88b176ffe47781..5450b1eb7ead83 100644
--- a/docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx
+++ b/docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx
@@ -9,14 +9,14 @@ const Icon = styled('span')({
   boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
   backgroundColor: '#f5f8fa',
   backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
-  '.root.Mui-focusVisible &': {
+  '.Mui-focusVisible &': {
     outline: '2px auto rgba(19,124,189,.6)',
     outlineOffset: 2,
   },
-  'input:hover ~ &': {
+  '& input:hover ~ &': {
     backgroundColor: '#ebf1f5',
   },
-  'input:disabled ~ &': {
+  '& input:disabled ~ &': {
     boxShadow: 'none',
     background: 'rgba(206,217,224,.5)',
   },
@@ -35,7 +35,7 @@ const CheckedIcon = styled(Icon)({
       "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
     content: '""',
   },
-  'input:hover ~ &': {
+  '& input:hover ~ &': {
     backgroundColor: '#106ba3',
   },
 });

From 456d1454a28566454d793437638bfe292d5a131b Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Thu, 18 Mar 2021 10:35:24 -0300
Subject: [PATCH 06/13] Fix disabled style

---
 docs/src/pages/components/checkboxes/CustomizedCheckbox.js  | 6 +++---
 docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/src/pages/components/checkboxes/CustomizedCheckbox.js b/docs/src/pages/components/checkboxes/CustomizedCheckbox.js
index 0b61e702103b85..6e6e552d75d89f 100644
--- a/docs/src/pages/components/checkboxes/CustomizedCheckbox.js
+++ b/docs/src/pages/components/checkboxes/CustomizedCheckbox.js
@@ -13,10 +13,10 @@ const Icon = styled('span')({
     outline: '2px auto rgba(19,124,189,.6)',
     outlineOffset: 2,
   },
-  '& input:hover ~ &': {
+  'input:hover ~ &': {
     backgroundColor: '#ebf1f5',
   },
-  '& input:disabled ~ &': {
+  'input:disabled ~ &': {
     boxShadow: 'none',
     background: 'rgba(206,217,224,.5)',
   },
@@ -35,7 +35,7 @@ const CheckedIcon = styled(Icon)({
       "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
     content: '""',
   },
-  '& input:hover ~ &': {
+  'input:hover ~ &': {
     backgroundColor: '#106ba3',
   },
 });
diff --git a/docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx b/docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx
index 5450b1eb7ead83..6be50606d1d41c 100644
--- a/docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx
+++ b/docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx
@@ -13,10 +13,10 @@ const Icon = styled('span')({
     outline: '2px auto rgba(19,124,189,.6)',
     outlineOffset: 2,
   },
-  '& input:hover ~ &': {
+  'input:hover ~ &': {
     backgroundColor: '#ebf1f5',
   },
-  '& input:disabled ~ &': {
+  'input:disabled ~ &': {
     boxShadow: 'none',
     background: 'rgba(206,217,224,.5)',
   },
@@ -35,7 +35,7 @@ const CheckedIcon = styled(Icon)({
       "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
     content: '""',
   },
-  '& input:hover ~ &': {
+  'input:hover ~ &': {
     backgroundColor: '#106ba3',
   },
 });

From de23ef6bb528e94049d8283905d5c6ca989fe0cd Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 18 Mar 2021 20:11:02 +0100
Subject: [PATCH 07/13] use the default color and change the prop order to
 match the DOM

---
 .../components/checkboxes/IndeterminateCheckbox.js    | 11 +++--------
 .../components/checkboxes/IndeterminateCheckbox.tsx   | 11 +++--------
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/docs/src/pages/components/checkboxes/IndeterminateCheckbox.js b/docs/src/pages/components/checkboxes/IndeterminateCheckbox.js
index fa35db8fc5cc09..1a711cb6adad49 100644
--- a/docs/src/pages/components/checkboxes/IndeterminateCheckbox.js
+++ b/docs/src/pages/components/checkboxes/IndeterminateCheckbox.js
@@ -22,15 +22,11 @@ export default function IndeterminateCheckbox() {
     <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
       <FormControlLabel
         label="Child 1"
-        control={
-          <Checkbox checked={checked[0]} color="primary" onChange={handleChange2} />
-        }
+        control={<Checkbox checked={checked[0]} onChange={handleChange2} />}
       />
       <FormControlLabel
         label="Child 2"
-        control={
-          <Checkbox checked={checked[1]} color="primary" onChange={handleChange3} />
-        }
+        control={<Checkbox checked={checked[1]} onChange={handleChange3} />}
       />
     </Box>
   );
@@ -38,15 +34,14 @@ export default function IndeterminateCheckbox() {
   return (
     <div>
       <FormControlLabel
-        label="Parent"
         control={
           <Checkbox
             checked={checked[0] && checked[1]}
             indeterminate={checked[0] !== checked[1]}
             onChange={handleChange1}
-            color="primary"
           />
         }
+        label="Parent"
       />
       {children}
     </div>
diff --git a/docs/src/pages/components/checkboxes/IndeterminateCheckbox.tsx b/docs/src/pages/components/checkboxes/IndeterminateCheckbox.tsx
index 62d8aa89d08ef2..775aa0aec42a5f 100644
--- a/docs/src/pages/components/checkboxes/IndeterminateCheckbox.tsx
+++ b/docs/src/pages/components/checkboxes/IndeterminateCheckbox.tsx
@@ -22,15 +22,11 @@ export default function IndeterminateCheckbox() {
     <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
       <FormControlLabel
         label="Child 1"
-        control={
-          <Checkbox checked={checked[0]} color="primary" onChange={handleChange2} />
-        }
+        control={<Checkbox checked={checked[0]} onChange={handleChange2} />}
       />
       <FormControlLabel
         label="Child 2"
-        control={
-          <Checkbox checked={checked[1]} color="primary" onChange={handleChange3} />
-        }
+        control={<Checkbox checked={checked[1]} onChange={handleChange3} />}
       />
     </Box>
   );
@@ -38,15 +34,14 @@ export default function IndeterminateCheckbox() {
   return (
     <div>
       <FormControlLabel
-        label="Parent"
         control={
           <Checkbox
             checked={checked[0] && checked[1]}
             indeterminate={checked[0] !== checked[1]}
             onChange={handleChange1}
-            color="primary"
           />
         }
+        label="Parent"
       />
       {children}
     </div>

From c0db640fb1fc49d0f12b3f6b27519c6ab7b75bd4 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 18 Mar 2021 20:13:06 +0100
Subject: [PATCH 08/13] Use the default color

---
 .../components/checkboxes/FormControlLabelPosition.js     | 8 ++++----
 .../components/checkboxes/FormControlLabelPosition.tsx    | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/src/pages/components/checkboxes/FormControlLabelPosition.js b/docs/src/pages/components/checkboxes/FormControlLabelPosition.js
index 0949600180ba3f..a36704237c1448 100644
--- a/docs/src/pages/components/checkboxes/FormControlLabelPosition.js
+++ b/docs/src/pages/components/checkboxes/FormControlLabelPosition.js
@@ -12,25 +12,25 @@ export default function FormControlLabelPosition() {
       <FormGroup aria-label="position" row>
         <FormControlLabel
           value="top"
-          control={<Checkbox color="primary" />}
+          control={<Checkbox />}
           label="Top"
           labelPlacement="top"
         />
         <FormControlLabel
           value="start"
-          control={<Checkbox color="primary" />}
+          control={<Checkbox />}
           label="Start"
           labelPlacement="start"
         />
         <FormControlLabel
           value="bottom"
-          control={<Checkbox color="primary" />}
+          control={<Checkbox />}
           label="Bottom"
           labelPlacement="bottom"
         />
         <FormControlLabel
           value="end"
-          control={<Checkbox color="primary" />}
+          control={<Checkbox />}
           label="End"
           labelPlacement="end"
         />
diff --git a/docs/src/pages/components/checkboxes/FormControlLabelPosition.tsx b/docs/src/pages/components/checkboxes/FormControlLabelPosition.tsx
index 0949600180ba3f..a36704237c1448 100644
--- a/docs/src/pages/components/checkboxes/FormControlLabelPosition.tsx
+++ b/docs/src/pages/components/checkboxes/FormControlLabelPosition.tsx
@@ -12,25 +12,25 @@ export default function FormControlLabelPosition() {
       <FormGroup aria-label="position" row>
         <FormControlLabel
           value="top"
-          control={<Checkbox color="primary" />}
+          control={<Checkbox />}
           label="Top"
           labelPlacement="top"
         />
         <FormControlLabel
           value="start"
-          control={<Checkbox color="primary" />}
+          control={<Checkbox />}
           label="Start"
           labelPlacement="start"
         />
         <FormControlLabel
           value="bottom"
-          control={<Checkbox color="primary" />}
+          control={<Checkbox />}
           label="Bottom"
           labelPlacement="bottom"
         />
         <FormControlLabel
           value="end"
-          control={<Checkbox color="primary" />}
+          control={<Checkbox />}
           label="End"
           labelPlacement="end"
         />

From 5dec35dfc00e595e0bab88bfa964449ffc4a58af Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 18 Mar 2021 20:14:24 +0100
Subject: [PATCH 09/13] Logical order

---
 docs/src/pages/components/checkboxes/checkboxes.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/src/pages/components/checkboxes/checkboxes.md b/docs/src/pages/components/checkboxes/checkboxes.md
index 463e9a12f12273..1d15fa383b1b52 100644
--- a/docs/src/pages/components/checkboxes/checkboxes.md
+++ b/docs/src/pages/components/checkboxes/checkboxes.md
@@ -22,6 +22,12 @@ If you have a single option, avoid using a checkbox and use an on/off switch ins
 
 {{"demo": "pages/components/checkboxes/Checkboxes.js"}}
 
+## Label
+
+You can provide a label to the `Checkbox` thanks to the `FormControlLabel` component.
+
+{{"demo": "pages/components/checkboxes/CheckboxLabels.js"}}
+
 ## Indeterminate
 
 A checkbox input can only have two states in a form: checked or unchecked. It either submits its value or doesn't.
@@ -29,12 +35,6 @@ Visually, there are actually three states a checkbox can be in: checked, uncheck
 
 {{"demo": "pages/components/checkboxes/IndeterminateCheckbox.js"}}
 
-## Label
-
-`Checkbox` can be provided with a label thanks to the `FormControlLabel` component.
-
-{{"demo": "pages/components/checkboxes/CheckboxLabels.js"}}
-
 ## FormGroup
 
 `FormGroup` is a helpful wrapper used to group selection controls components that provides an easier API.

From 0958872e721dec7ade66831582aa1f0510794d22 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 18 Mar 2021 20:15:35 +0100
Subject: [PATCH 10/13] 3 is important

---
 docs/src/pages/components/checkboxes/checkboxes.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/checkboxes/checkboxes.md b/docs/src/pages/components/checkboxes/checkboxes.md
index 1d15fa383b1b52..b47766ba7ae937 100644
--- a/docs/src/pages/components/checkboxes/checkboxes.md
+++ b/docs/src/pages/components/checkboxes/checkboxes.md
@@ -28,10 +28,13 @@ You can provide a label to the `Checkbox` thanks to the `FormControlLabel` compo
 
 {{"demo": "pages/components/checkboxes/CheckboxLabels.js"}}
 
+
+
 ## Indeterminate
 
-A checkbox input can only have two states in a form: checked or unchecked. It either submits its value or doesn't.
-Visually, there are actually three states a checkbox can be in: checked, unchecked, or indeterminate.
+A checkbox input can only have two states in a form: checked or unchecked.
+It either submits its value or doesn't.
+Visually, there are **three** states a checkbox can be in: checked, unchecked, or indeterminate.
 
 {{"demo": "pages/components/checkboxes/IndeterminateCheckbox.js"}}
 

From 55a299d707a56184f12550905694dee69aa4a8e0 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 18 Mar 2021 20:18:17 +0100
Subject: [PATCH 11/13] I have seen @dtasson raise question about this point

---
 docs/src/pages/components/checkboxes/checkboxes.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/src/pages/components/checkboxes/checkboxes.md b/docs/src/pages/components/checkboxes/checkboxes.md
index b47766ba7ae937..0d9bc94e24d4ad 100644
--- a/docs/src/pages/components/checkboxes/checkboxes.md
+++ b/docs/src/pages/components/checkboxes/checkboxes.md
@@ -38,6 +38,9 @@ Visually, there are **three** states a checkbox can be in: checked, unchecked, o
 
 {{"demo": "pages/components/checkboxes/IndeterminateCheckbox.js"}}
 
+> ⚠️ When indeterminate is set, the value of the `checked` prop only impacts the form submitted values.
+> It has no accessibility or UX implications.
+
 ## FormGroup
 
 `FormGroup` is a helpful wrapper used to group selection controls components that provides an easier API.

From 0a8ca2edc2edb2fc91ab6e65fc7ab888eae8f2b9 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 18 Mar 2021 20:18:38 +0100
Subject: [PATCH 12/13] Fix language

---
 docs/src/pages/components/checkboxes/checkboxes.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/components/checkboxes/checkboxes.md b/docs/src/pages/components/checkboxes/checkboxes.md
index 0d9bc94e24d4ad..a3baf0ba6626dc 100644
--- a/docs/src/pages/components/checkboxes/checkboxes.md
+++ b/docs/src/pages/components/checkboxes/checkboxes.md
@@ -43,7 +43,7 @@ Visually, there are **three** states a checkbox can be in: checked, unchecked, o
 
 ## FormGroup
 
-`FormGroup` is a helpful wrapper used to group selection controls components that provides an easier API.
+`FormGroup` is a helpful wrapper used to group selection control components.
 
 {{"demo": "pages/components/checkboxes/CheckboxesGroup.js"}}
 

From 6e51db9a5e6487ee7a201c572a20816265047565 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 18 Mar 2021 20:28:43 +0100
Subject: [PATCH 13/13] breakdown the demo into smaller chunks

---
 .../components/checkboxes/CheckboxLabels.js   | 102 +----------------
 .../components/checkboxes/CheckboxLabels.tsx  | 104 +-----------------
 .../pages/components/checkboxes/Checkboxes.js |  48 +-------
 .../components/checkboxes/Checkboxes.tsx      |  48 +-------
 .../components/checkboxes/ColorCheckboxes.js  |  23 ++++
 .../components/checkboxes/ColorCheckboxes.tsx |  23 ++++
 .../checkboxes/ControlledCheckbox.js          |  18 +++
 .../checkboxes/ControlledCheckbox.tsx         |  18 +++
 .../components/checkboxes/IconCheckboxes.js   |  25 +++++
 .../components/checkboxes/IconCheckboxes.tsx  |  25 +++++
 .../components/checkboxes/SizeCheckboxes.js   |  20 ++++
 .../components/checkboxes/SizeCheckboxes.tsx  |  20 ++++
 .../pages/components/checkboxes/checkboxes.md |  18 +++
 13 files changed, 203 insertions(+), 289 deletions(-)
 create mode 100644 docs/src/pages/components/checkboxes/ColorCheckboxes.js
 create mode 100644 docs/src/pages/components/checkboxes/ColorCheckboxes.tsx
 create mode 100644 docs/src/pages/components/checkboxes/ControlledCheckbox.js
 create mode 100644 docs/src/pages/components/checkboxes/ControlledCheckbox.tsx
 create mode 100644 docs/src/pages/components/checkboxes/IconCheckboxes.js
 create mode 100644 docs/src/pages/components/checkboxes/IconCheckboxes.tsx
 create mode 100644 docs/src/pages/components/checkboxes/SizeCheckboxes.js
 create mode 100644 docs/src/pages/components/checkboxes/SizeCheckboxes.tsx

diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.js b/docs/src/pages/components/checkboxes/CheckboxLabels.js
index 9d738a443a486e..e1cfb0f6791e19 100644
--- a/docs/src/pages/components/checkboxes/CheckboxLabels.js
+++ b/docs/src/pages/components/checkboxes/CheckboxLabels.js
@@ -1,116 +1,20 @@
 import * as React from 'react';
-import { experimentalStyled as styled } from '@material-ui/core/styles';
-import { green } from '@material-ui/core/colors';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Checkbox 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 = styled((props) => <Checkbox color="default" {...props} />)(
-  () => ({
-    color: green[400],
-    '&.Mui-checked': {
-      color: green[600],
-    },
-  }),
-);
 
 export default function CheckboxLabels() {
-  const [state, setState] = React.useState({
-    checkedA: true,
-    checkedB: true,
-    checkedF: true,
-    checkedG: true,
-  });
-
-  const handleChange = (event) => {
-    setState({
-      ...state,
-      [event.target.name]: event.target.checked,
-    });
-  };
-
   return (
-    <FormGroup row>
+    <FormGroup>
       <FormControlLabel
-        control={
-          <Checkbox
-            checked={state.checkedA}
-            onChange={handleChange}
-            name="checkedA"
-          />
-        }
+        control={<Checkbox defaultChecked name="checkedA" />}
         label="Secondary"
       />
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={state.checkedB}
-            onChange={handleChange}
-            name="checkedB"
-            color="primary"
-          />
-        }
-        label="Primary"
-      />
-      <FormControlLabel
-        control={<Checkbox name="checkedC" />}
-        label="Uncontrolled"
-      />
       <FormControlLabel
         disabled
-        control={<Checkbox name="checkedD" />}
+        control={<Checkbox name="checkedB" />}
         label="Disabled"
       />
-      <FormControlLabel
-        disabled
-        control={<Checkbox checked name="checkedE" />}
-        label="Disabled"
-      />
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={state.checkedF}
-            onChange={handleChange}
-            name="checkedF"
-            indeterminate
-          />
-        }
-        label="Indeterminate"
-      />
-      <FormControlLabel
-        control={
-          <GreenCheckbox
-            checked={state.checkedG}
-            onChange={handleChange}
-            name="checkedG"
-          />
-        }
-        label="Custom color"
-      />
-      <FormControlLabel
-        control={
-          <Checkbox
-            icon={<FavoriteBorder />}
-            checkedIcon={<Favorite />}
-            name="checkedH"
-          />
-        }
-        label="Custom icon"
-      />
-      <FormControlLabel
-        control={
-          <Checkbox
-            icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
-            checkedIcon={<CheckBoxIcon fontSize="small" />}
-            name="checkedI"
-          />
-        }
-        label="Custom size"
-      />
     </FormGroup>
   );
 }
diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.tsx b/docs/src/pages/components/checkboxes/CheckboxLabels.tsx
index 6e4c4fc7c6f5c0..e1cfb0f6791e19 100644
--- a/docs/src/pages/components/checkboxes/CheckboxLabels.tsx
+++ b/docs/src/pages/components/checkboxes/CheckboxLabels.tsx
@@ -1,116 +1,20 @@
 import * as React from 'react';
-import { experimentalStyled as styled } from '@material-ui/core/styles';
-import { green } from '@material-ui/core/colors';
 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 = styled((props: CheckboxProps) => (
-  <Checkbox color="default" {...props} />
-))(() => ({
-  color: green[400],
-  '&.Mui-checked': {
-    color: green[600],
-  },
-}));
+import Checkbox from '@material-ui/core/Checkbox';
 
 export default function CheckboxLabels() {
-  const [state, setState] = React.useState({
-    checkedA: true,
-    checkedB: true,
-    checkedF: true,
-    checkedG: true,
-  });
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setState({
-      ...state,
-      [event.target.name]: event.target.checked,
-    });
-  };
-
   return (
-    <FormGroup row>
+    <FormGroup>
       <FormControlLabel
-        control={
-          <Checkbox
-            checked={state.checkedA}
-            onChange={handleChange}
-            name="checkedA"
-          />
-        }
+        control={<Checkbox defaultChecked name="checkedA" />}
         label="Secondary"
       />
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={state.checkedB}
-            onChange={handleChange}
-            name="checkedB"
-            color="primary"
-          />
-        }
-        label="Primary"
-      />
-      <FormControlLabel
-        control={<Checkbox name="checkedC" />}
-        label="Uncontrolled"
-      />
       <FormControlLabel
         disabled
-        control={<Checkbox name="checkedD" />}
+        control={<Checkbox name="checkedB" />}
         label="Disabled"
       />
-      <FormControlLabel
-        disabled
-        control={<Checkbox checked name="checkedE" />}
-        label="Disabled"
-      />
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={state.checkedF}
-            onChange={handleChange}
-            name="checkedF"
-            indeterminate
-          />
-        }
-        label="Indeterminate"
-      />
-      <FormControlLabel
-        control={
-          <GreenCheckbox
-            checked={state.checkedG}
-            onChange={handleChange}
-            name="checkedG"
-          />
-        }
-        label="Custom color"
-      />
-      <FormControlLabel
-        control={
-          <Checkbox
-            icon={<FavoriteBorder />}
-            checkedIcon={<Favorite />}
-            name="checkedH"
-          />
-        }
-        label="Custom icon"
-      />
-      <FormControlLabel
-        control={
-          <Checkbox
-            icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
-            checkedIcon={<CheckBoxIcon fontSize="small" />}
-            name="checkedI"
-          />
-        }
-        label="Custom size"
-      />
     </FormGroup>
   );
 }
diff --git a/docs/src/pages/components/checkboxes/Checkboxes.js b/docs/src/pages/components/checkboxes/Checkboxes.js
index 491e7eba92d1e4..c5978c4b5eee2d 100644
--- a/docs/src/pages/components/checkboxes/Checkboxes.js
+++ b/docs/src/pages/components/checkboxes/Checkboxes.js
@@ -2,57 +2,15 @@ import * as React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
 
 export default function Checkboxes() {
-  const [checked, setChecked] = React.useState(true);
-
-  const handleChange = (event) => {
-    setChecked(event.target.checked);
-  };
-
   return (
     <div>
-      <Checkbox
-        checked={checked}
-        onChange={handleChange}
-        inputProps={{ 'aria-label': 'primary checkbox' }}
-      />
-      <Checkbox
-        defaultChecked
-        color="primary"
-        inputProps={{ 'aria-label': 'secondary checkbox' }}
-      />
-      <Checkbox
-        inputProps={{
-          'aria-label': 'uncontrolled-checkbox',
-        }}
-      />
+      <Checkbox defaultChecked inputProps={{ 'aria-label': 'checked checkbox' }} />
+      <Checkbox inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
       <Checkbox disabled inputProps={{ 'aria-label': 'disabled checkbox' }} />
       <Checkbox
         disabled
         checked
-        inputProps={{
-          'aria-label': 'disabled checked checkbox',
-        }}
-      />
-      <Checkbox
-        defaultChecked
-        indeterminate
-        inputProps={{
-          'aria-label': 'indeterminate checkbox',
-        }}
-      />
-      <Checkbox
-        defaultChecked
-        color="default"
-        inputProps={{
-          'aria-label': 'checkbox with default color',
-        }}
-      />
-      <Checkbox
-        defaultChecked
-        size="small"
-        inputProps={{
-          'aria-label': 'checkbox with small size',
-        }}
+        inputProps={{ 'aria-label': 'disabled checked checkbox' }}
       />
     </div>
   );
diff --git a/docs/src/pages/components/checkboxes/Checkboxes.tsx b/docs/src/pages/components/checkboxes/Checkboxes.tsx
index f14e7e7979042c..c5978c4b5eee2d 100644
--- a/docs/src/pages/components/checkboxes/Checkboxes.tsx
+++ b/docs/src/pages/components/checkboxes/Checkboxes.tsx
@@ -2,57 +2,15 @@ import * as React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
 
 export default function Checkboxes() {
-  const [checked, setChecked] = React.useState(true);
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setChecked(event.target.checked);
-  };
-
   return (
     <div>
-      <Checkbox
-        checked={checked}
-        onChange={handleChange}
-        inputProps={{ 'aria-label': 'primary checkbox' }}
-      />
-      <Checkbox
-        defaultChecked
-        color="primary"
-        inputProps={{ 'aria-label': 'secondary checkbox' }}
-      />
-      <Checkbox
-        inputProps={{
-          'aria-label': 'uncontrolled-checkbox',
-        }}
-      />
+      <Checkbox defaultChecked inputProps={{ 'aria-label': 'checked checkbox' }} />
+      <Checkbox inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
       <Checkbox disabled inputProps={{ 'aria-label': 'disabled checkbox' }} />
       <Checkbox
         disabled
         checked
-        inputProps={{
-          'aria-label': 'disabled checked checkbox',
-        }}
-      />
-      <Checkbox
-        defaultChecked
-        indeterminate
-        inputProps={{
-          'aria-label': 'indeterminate checkbox',
-        }}
-      />
-      <Checkbox
-        defaultChecked
-        color="default"
-        inputProps={{
-          'aria-label': 'checkbox with default color',
-        }}
-      />
-      <Checkbox
-        defaultChecked
-        size="small"
-        inputProps={{
-          'aria-label': 'checkbox with small size',
-        }}
+        inputProps={{ 'aria-label': 'disabled checked checkbox' }}
       />
     </div>
   );
diff --git a/docs/src/pages/components/checkboxes/ColorCheckboxes.js b/docs/src/pages/components/checkboxes/ColorCheckboxes.js
new file mode 100644
index 00000000000000..988b058d25ac0e
--- /dev/null
+++ b/docs/src/pages/components/checkboxes/ColorCheckboxes.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { green } from '@material-ui/core/colors';
+import Checkbox from '@material-ui/core/Checkbox';
+
+export default function ColorCheckboxes() {
+  return (
+    <div>
+      <Checkbox defaultChecked name="checkedA" />
+      <Checkbox defaultChecked name="checkedB" color="primary" />
+      <Checkbox defaultChecked name="checkedC" color="default" />
+      <Checkbox
+        defaultChecked
+        name="checkedD"
+        sx={{
+          color: green[800],
+          '&.Mui-checked': {
+            color: green[600],
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/checkboxes/ColorCheckboxes.tsx b/docs/src/pages/components/checkboxes/ColorCheckboxes.tsx
new file mode 100644
index 00000000000000..988b058d25ac0e
--- /dev/null
+++ b/docs/src/pages/components/checkboxes/ColorCheckboxes.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { green } from '@material-ui/core/colors';
+import Checkbox from '@material-ui/core/Checkbox';
+
+export default function ColorCheckboxes() {
+  return (
+    <div>
+      <Checkbox defaultChecked name="checkedA" />
+      <Checkbox defaultChecked name="checkedB" color="primary" />
+      <Checkbox defaultChecked name="checkedC" color="default" />
+      <Checkbox
+        defaultChecked
+        name="checkedD"
+        sx={{
+          color: green[800],
+          '&.Mui-checked': {
+            color: green[600],
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/checkboxes/ControlledCheckbox.js b/docs/src/pages/components/checkboxes/ControlledCheckbox.js
new file mode 100644
index 00000000000000..334075d9dd2180
--- /dev/null
+++ b/docs/src/pages/components/checkboxes/ControlledCheckbox.js
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Checkbox from '@material-ui/core/Checkbox';
+
+export default function ControlledCheckbox() {
+  const [checked, setChecked] = React.useState(true);
+
+  const handleChange = (event) => {
+    setChecked(event.target.checked);
+  };
+
+  return (
+    <Checkbox
+      checked={checked}
+      onChange={handleChange}
+      inputProps={{ 'aria-label': 'controlled checkbox' }}
+    />
+  );
+}
diff --git a/docs/src/pages/components/checkboxes/ControlledCheckbox.tsx b/docs/src/pages/components/checkboxes/ControlledCheckbox.tsx
new file mode 100644
index 00000000000000..be0474ca3a8a41
--- /dev/null
+++ b/docs/src/pages/components/checkboxes/ControlledCheckbox.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Checkbox from '@material-ui/core/Checkbox';
+
+export default function ControlledCheckbox() {
+  const [checked, setChecked] = React.useState(true);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+
+  return (
+    <Checkbox
+      checked={checked}
+      onChange={handleChange}
+      inputProps={{ 'aria-label': 'controlled checkbox' }}
+    />
+  );
+}
diff --git a/docs/src/pages/components/checkboxes/IconCheckboxes.js b/docs/src/pages/components/checkboxes/IconCheckboxes.js
new file mode 100644
index 00000000000000..4a0c144bce9564
--- /dev/null
+++ b/docs/src/pages/components/checkboxes/IconCheckboxes.js
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Checkbox from '@material-ui/core/Checkbox';
+import FavoriteBorder from '@material-ui/icons/FavoriteBorder';
+import Favorite from '@material-ui/icons/Favorite';
+import BookmarkBorderIcon from '@material-ui/icons/BookmarkBorder';
+import BookmarkIcon from '@material-ui/icons/Bookmark';
+
+export default function IconCheckboxes() {
+  return (
+    <div>
+      <Checkbox
+        icon={<FavoriteBorder />}
+        checkedIcon={<Favorite />}
+        name="checkedA"
+        inputProps={{ 'aria-label': 'favorite checkbox' }}
+      />
+      <Checkbox
+        icon={<BookmarkBorderIcon />}
+        checkedIcon={<BookmarkIcon />}
+        name="checkedB"
+        inputProps={{ 'aria-label': 'bookmarked checkbox' }}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/checkboxes/IconCheckboxes.tsx b/docs/src/pages/components/checkboxes/IconCheckboxes.tsx
new file mode 100644
index 00000000000000..4a0c144bce9564
--- /dev/null
+++ b/docs/src/pages/components/checkboxes/IconCheckboxes.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Checkbox from '@material-ui/core/Checkbox';
+import FavoriteBorder from '@material-ui/icons/FavoriteBorder';
+import Favorite from '@material-ui/icons/Favorite';
+import BookmarkBorderIcon from '@material-ui/icons/BookmarkBorder';
+import BookmarkIcon from '@material-ui/icons/Bookmark';
+
+export default function IconCheckboxes() {
+  return (
+    <div>
+      <Checkbox
+        icon={<FavoriteBorder />}
+        checkedIcon={<Favorite />}
+        name="checkedA"
+        inputProps={{ 'aria-label': 'favorite checkbox' }}
+      />
+      <Checkbox
+        icon={<BookmarkBorderIcon />}
+        checkedIcon={<BookmarkIcon />}
+        name="checkedB"
+        inputProps={{ 'aria-label': 'bookmarked checkbox' }}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/checkboxes/SizeCheckboxes.js b/docs/src/pages/components/checkboxes/SizeCheckboxes.js
new file mode 100644
index 00000000000000..98389907764242
--- /dev/null
+++ b/docs/src/pages/components/checkboxes/SizeCheckboxes.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Checkbox from '@material-ui/core/Checkbox';
+
+export default function SizeCheckboxes() {
+  return (
+    <div>
+      <Checkbox
+        defaultChecked
+        inputProps={{ 'aria-label': 'small checkbox' }}
+        size="small"
+      />
+      <Checkbox defaultChecked inputProps={{ 'aria-label': 'normal checkbox' }} />
+      <Checkbox
+        defaultChecked
+        inputProps={{ 'aria-label': 'large checkbox' }}
+        sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/checkboxes/SizeCheckboxes.tsx b/docs/src/pages/components/checkboxes/SizeCheckboxes.tsx
new file mode 100644
index 00000000000000..98389907764242
--- /dev/null
+++ b/docs/src/pages/components/checkboxes/SizeCheckboxes.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Checkbox from '@material-ui/core/Checkbox';
+
+export default function SizeCheckboxes() {
+  return (
+    <div>
+      <Checkbox
+        defaultChecked
+        inputProps={{ 'aria-label': 'small checkbox' }}
+        size="small"
+      />
+      <Checkbox defaultChecked inputProps={{ 'aria-label': 'normal checkbox' }} />
+      <Checkbox
+        defaultChecked
+        inputProps={{ 'aria-label': 'large checkbox' }}
+        sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/checkboxes/checkboxes.md b/docs/src/pages/components/checkboxes/checkboxes.md
index a3baf0ba6626dc..9358b4c824c74b 100644
--- a/docs/src/pages/components/checkboxes/checkboxes.md
+++ b/docs/src/pages/components/checkboxes/checkboxes.md
@@ -28,7 +28,25 @@ You can provide a label to the `Checkbox` thanks to the `FormControlLabel` compo
 
 {{"demo": "pages/components/checkboxes/CheckboxLabels.js"}}
 
+## Size
 
+Use the `size` prop or customize the font size of the svg icons to change the size of the checkboxes.
+
+{{"demo": "pages/components/checkboxes/SizeCheckboxes.js"}}
+
+## Color
+
+{{"demo": "pages/components/checkboxes/ColorCheckboxes.js"}}
+
+## Icon
+
+{{"demo": "pages/components/checkboxes/IconCheckboxes.js"}}
+
+## Controlled
+
+You can control the checkbox with the `value` and `onChange` props:
+
+{{"demo": "pages/components/checkboxes/ControlledCheckbox.js"}}
 
 ## Indeterminate