From 0e33a9312c99b1c6bfd87bcd30673ba020c54fca Mon Sep 17 00:00:00 2001
From: Sandra Marcela Herrera Arriaga <sandra.h.arriaga@gmail.com>
Date: Wed, 4 Dec 2019 13:14:11 -0700
Subject: [PATCH 01/10] working on adding small support

---
 docs/src/pages/components/radio-buttons/RadioButtons.tsx | 3 +--
 packages/material-ui/src/Radio/Radio.d.ts                | 1 +
 packages/material-ui/src/Radio/Radio.js                  | 1 +
 packages/material-ui/src/Radio/RadioButtonIcon.js        | 5 +++--
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/docs/src/pages/components/radio-buttons/RadioButtons.tsx b/docs/src/pages/components/radio-buttons/RadioButtons.tsx
index ac30f0467112e1..fd7ff9d72bbf8e 100644
--- a/docs/src/pages/components/radio-buttons/RadioButtons.tsx
+++ b/docs/src/pages/components/radio-buttons/RadioButtons.tsx
@@ -60,8 +60,7 @@ export default function RadioButtons() {
         color="default"
         name="radio-button-demo"
         inputProps={{ 'aria-label': 'E' }}
-        icon={<RadioButtonUncheckedIcon fontSize="small" />}
-        checkedIcon={<RadioButtonCheckedIcon fontSize="small" />}
+        size="small"
       />
     </div>
   );
diff --git a/packages/material-ui/src/Radio/Radio.d.ts b/packages/material-ui/src/Radio/Radio.d.ts
index be2d98a50a6469..5cfeb2fde24a70 100644
--- a/packages/material-ui/src/Radio/Radio.d.ts
+++ b/packages/material-ui/src/Radio/Radio.d.ts
@@ -7,6 +7,7 @@ export interface RadioProps
   checkedIcon?: React.ReactNode;
   color?: 'primary' | 'secondary' | 'default';
   icon?: React.ReactNode;
+  size?: 'small' | 'medium';
 }
 
 export type RadioClassKey = SwitchBaseClassKey | 'colorPrimary' | 'colorSecondary';
diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js
index 5fc1a3eb9896ee..3282b112b4c2f1 100644
--- a/packages/material-ui/src/Radio/Radio.js
+++ b/packages/material-ui/src/Radio/Radio.js
@@ -64,6 +64,7 @@ const Radio = React.forwardRef(function Radio(props, ref) {
     disabled = false,
     name: nameProp,
     onChange: onChangeProp,
+    size = 'medium',
     ...other
   } = props;
   const radioGroup = React.useContext(RadioGroupContext);
diff --git a/packages/material-ui/src/Radio/RadioButtonIcon.js b/packages/material-ui/src/Radio/RadioButtonIcon.js
index 9cb07f68167989..fe4e202cf16a97 100644
--- a/packages/material-ui/src/Radio/RadioButtonIcon.js
+++ b/packages/material-ui/src/Radio/RadioButtonIcon.js
@@ -34,11 +34,12 @@ export const styles = theme => ({
  */
 function RadioButtonIcon(props) {
   const { checked, classes } = props;
+  const { checked, classes, fontSize } = props;
 
   return (
     <div className={clsx(classes.root, { [classes.checked]: checked })}>
-      <RadioButtonUncheckedIcon />
-      <RadioButtonCheckedIcon className={classes.layer} />
+     <RadioButtonUncheckedIcon fontSize={fontSize} />
+     <RadioButtonCheckedIcon fontSize={fontSize} className={classes.layer} />
     </div>
   );
 }

From f7083197762a91fae3ac2d99cf76cc7976e9f99c Mon Sep 17 00:00:00 2001
From: Sandra Marcela Herrera Arriaga <sandra.h.arriaga@gmail.com>
Date: Wed, 4 Dec 2019 13:48:47 -0700
Subject: [PATCH 02/10] add size to radio.propTypes

---
 packages/material-ui/src/Radio/Radio.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js
index 3282b112b4c2f1..43e9be9551c19d 100644
--- a/packages/material-ui/src/Radio/Radio.js
+++ b/packages/material-ui/src/Radio/Radio.js
@@ -86,8 +86,8 @@ const Radio = React.forwardRef(function Radio(props, ref) {
     <SwitchBase
       color={color}
       type="radio"
-      icon={defaultIcon}
-      checkedIcon={defaultCheckedIcon}
+      icon={React.cloneElement(defaultIcon,{ fontSize: size === 'small' ? 'small' : 'default'})}
+      checkedIcon={React.cloneElement(defaultCheckedIcon,{fontSize : size === 'small' ? 'small':'default',})}
       classes={{
         root: clsx(classes.root, classes[`color${capitalize(color)}`]),
         checked: classes.checked,
@@ -108,6 +108,11 @@ Radio.propTypes = {
    * If `true`, the component is checked.
    */
   checked: PropTypes.bool,
+  /**
+  * The size of the radio.
+  * `small` is equivalent to the dense radio styling.
+  */
+  size: PropTypes.oneOf(['small', 'medium']),
   /**
    * The icon to display when the component is checked.
    */

From 35a3bda821e2c6bcb71e95464534d2e05ccc7fd4 Mon Sep 17 00:00:00 2001
From: Sandra Marcela Herrera Arriaga <sandra.h.arriaga@gmail.com>
Date: Wed, 4 Dec 2019 14:03:11 -0700
Subject: [PATCH 03/10] remove duplicated props on RadioButtonIcon function

---
 packages/material-ui/src/Radio/RadioButtonIcon.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/material-ui/src/Radio/RadioButtonIcon.js b/packages/material-ui/src/Radio/RadioButtonIcon.js
index fe4e202cf16a97..0a20ec2ba3b6e2 100644
--- a/packages/material-ui/src/Radio/RadioButtonIcon.js
+++ b/packages/material-ui/src/Radio/RadioButtonIcon.js
@@ -33,7 +33,6 @@ export const styles = theme => ({
  * @ignore - internal component.
  */
 function RadioButtonIcon(props) {
-  const { checked, classes } = props;
   const { checked, classes, fontSize } = props;
 
   return (

From b1750a5699b3d60362aafda36a79e82f2b397f00 Mon Sep 17 00:00:00 2001
From: Sandra Marcela Herrera Arriaga <sandra.h.arriaga@gmail.com>
Date: Wed, 4 Dec 2019 14:13:32 -0700
Subject: [PATCH 04/10] add prop fontSize to RadioButtonIcons.js

---
 packages/material-ui/src/Radio/RadioButtonIcon.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/material-ui/src/Radio/RadioButtonIcon.js b/packages/material-ui/src/Radio/RadioButtonIcon.js
index 0a20ec2ba3b6e2..1a34c2e2b6985d 100644
--- a/packages/material-ui/src/Radio/RadioButtonIcon.js
+++ b/packages/material-ui/src/Radio/RadioButtonIcon.js
@@ -53,6 +53,11 @@ RadioButtonIcon.propTypes = {
    * See [CSS API](#css) below for more details.
    */
   classes: PropTypes.object.isRequired,
+  /**
+  * The size of the radio.
+  * `small` is equivalent to the dense radio styling.
+  */
+  fontSize: PropTypes.oneOf(['small', 'medium']),
 };
 
 export default withStyles(styles, { name: 'PrivateRadioButtonIcon' })(RadioButtonIcon);

From 4b43a02378b61b11cec8bd76a2d6778a8214bb09 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 5 Dec 2019 01:05:55 +0100
Subject: [PATCH 05/10] yarn docs:typescript:formatted

---
 docs/src/pages/components/radio-buttons/RadioButtons.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/docs/src/pages/components/radio-buttons/RadioButtons.js b/docs/src/pages/components/radio-buttons/RadioButtons.js
index 25768e2d5a6d33..208be428d4e723 100644
--- a/docs/src/pages/components/radio-buttons/RadioButtons.js
+++ b/docs/src/pages/components/radio-buttons/RadioButtons.js
@@ -2,8 +2,6 @@ import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import { green } from '@material-ui/core/colors';
 import Radio from '@material-ui/core/Radio';
-import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
-import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
 
 const GreenRadio = withStyles({
   root: {
@@ -60,8 +58,7 @@ export default function RadioButtons() {
         color="default"
         name="radio-button-demo"
         inputProps={{ 'aria-label': 'E' }}
-        icon={<RadioButtonUncheckedIcon fontSize="small" />}
-        checkedIcon={<RadioButtonCheckedIcon fontSize="small" />}
+        size="small"
       />
     </div>
   );

From 788257b57ba2d3547a8f112390b5f7fb729e14d9 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 5 Dec 2019 01:06:27 +0100
Subject: [PATCH 06/10] yarn docs:api

---
 docs/pages/api/radio.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/pages/api/radio.md b/docs/pages/api/radio.md
index 404ec1ea1b125a..2d29d96526bcf2 100644
--- a/docs/pages/api/radio.md
+++ b/docs/pages/api/radio.md
@@ -25,6 +25,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">checked</span> | <span class="prop-type">bool</span> |  | If `true`, the component is checked. |
+| <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'</span> | <span class="prop-default">'medium'</span> | The size of the radio. `small` is equivalent to the dense radio styling. |
 | <span class="prop-name">checkedIcon</span> | <span class="prop-type">node</span> |  | The icon to display when the component is checked. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'default'</span> | <span class="prop-default">'secondary'</span> | The color of the component. It supports those theme colors that make sense for this component. |

From ac0190c9090878eeb92b7a8805304bdd36833ef6 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 5 Dec 2019 01:07:51 +0100
Subject: [PATCH 07/10] yarn prettier

---
 packages/material-ui/src/Radio/Radio.js           | 12 +++++++-----
 packages/material-ui/src/Radio/RadioButtonIcon.js | 10 +++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js
index 43e9be9551c19d..6ad0ee673b309d 100644
--- a/packages/material-ui/src/Radio/Radio.js
+++ b/packages/material-ui/src/Radio/Radio.js
@@ -86,8 +86,10 @@ const Radio = React.forwardRef(function Radio(props, ref) {
     <SwitchBase
       color={color}
       type="radio"
-      icon={React.cloneElement(defaultIcon,{ fontSize: size === 'small' ? 'small' : 'default'})}
-      checkedIcon={React.cloneElement(defaultCheckedIcon,{fontSize : size === 'small' ? 'small':'default',})}
+      icon={React.cloneElement(defaultIcon, { fontSize: size === 'small' ? 'small' : 'default' })}
+      checkedIcon={React.cloneElement(defaultCheckedIcon, {
+        fontSize: size === 'small' ? 'small' : 'default',
+      })}
       classes={{
         root: clsx(classes.root, classes[`color${capitalize(color)}`]),
         checked: classes.checked,
@@ -109,9 +111,9 @@ Radio.propTypes = {
    */
   checked: PropTypes.bool,
   /**
-  * The size of the radio.
-  * `small` is equivalent to the dense radio styling.
-  */
+   * The size of the radio.
+   * `small` is equivalent to the dense radio styling.
+   */
   size: PropTypes.oneOf(['small', 'medium']),
   /**
    * The icon to display when the component is checked.
diff --git a/packages/material-ui/src/Radio/RadioButtonIcon.js b/packages/material-ui/src/Radio/RadioButtonIcon.js
index 1a34c2e2b6985d..d97c789c1f790b 100644
--- a/packages/material-ui/src/Radio/RadioButtonIcon.js
+++ b/packages/material-ui/src/Radio/RadioButtonIcon.js
@@ -37,8 +37,8 @@ function RadioButtonIcon(props) {
 
   return (
     <div className={clsx(classes.root, { [classes.checked]: checked })}>
-     <RadioButtonUncheckedIcon fontSize={fontSize} />
-     <RadioButtonCheckedIcon fontSize={fontSize} className={classes.layer} />
+      <RadioButtonUncheckedIcon fontSize={fontSize} />
+      <RadioButtonCheckedIcon fontSize={fontSize} className={classes.layer} />
     </div>
   );
 }
@@ -54,9 +54,9 @@ RadioButtonIcon.propTypes = {
    */
   classes: PropTypes.object.isRequired,
   /**
-  * The size of the radio.
-  * `small` is equivalent to the dense radio styling.
-  */
+   * The size of the radio.
+   * `small` is equivalent to the dense radio styling.
+   */
   fontSize: PropTypes.oneOf(['small', 'medium']),
 };
 

From e7ba0c413325ab4bd4acac7178aa26b3c2c559a3 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 5 Dec 2019 01:12:15 +0100
Subject: [PATCH 08/10] fix warnings

---
 docs/pages/api/radio.md                           |  2 +-
 packages/material-ui/src/Radio/Radio.js           | 10 +++++-----
 packages/material-ui/src/Radio/RadioButtonIcon.js |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/pages/api/radio.md b/docs/pages/api/radio.md
index 2d29d96526bcf2..81cf13146a8198 100644
--- a/docs/pages/api/radio.md
+++ b/docs/pages/api/radio.md
@@ -25,7 +25,6 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">checked</span> | <span class="prop-type">bool</span> |  | If `true`, the component is checked. |
-| <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'</span> | <span class="prop-default">'medium'</span> | The size of the radio. `small` is equivalent to the dense radio styling. |
 | <span class="prop-name">checkedIcon</span> | <span class="prop-type">node</span> |  | The icon to display when the component is checked. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'default'</span> | <span class="prop-default">'secondary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
@@ -38,6 +37,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">name</span> | <span class="prop-type">string</span> |  | Name attribute of the `input` element. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). You can pull out the new checked state by accessing `event.target.checked` (boolean). |
 | <span class="prop-name">required</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be required. |
+| <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'</span> | <span class="prop-default">'medium'</span> | The size of the radio. `small` is equivalent to the dense radio styling. |
 | <span class="prop-name">type</span> | <span class="prop-type">string</span> |  | The input component prop `type`. |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The value of the component. The DOM API casts this to a string. |
 
diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js
index 6ad0ee673b309d..800d33dbde5a55 100644
--- a/packages/material-ui/src/Radio/Radio.js
+++ b/packages/material-ui/src/Radio/Radio.js
@@ -110,11 +110,6 @@ Radio.propTypes = {
    * If `true`, the component is checked.
    */
   checked: PropTypes.bool,
-  /**
-   * The size of the radio.
-   * `small` is equivalent to the dense radio styling.
-   */
-  size: PropTypes.oneOf(['small', 'medium']),
   /**
    * The icon to display when the component is checked.
    */
@@ -168,6 +163,11 @@ Radio.propTypes = {
    * If `true`, the `input` element will be required.
    */
   required: PropTypes.bool,
+  /**
+   * The size of the radio.
+   * `small` is equivalent to the dense radio styling.
+   */
+  size: PropTypes.oneOf(['small', 'medium']),
   /**
    * The input component prop `type`.
    */
diff --git a/packages/material-ui/src/Radio/RadioButtonIcon.js b/packages/material-ui/src/Radio/RadioButtonIcon.js
index d97c789c1f790b..6f15ab2584f870 100644
--- a/packages/material-ui/src/Radio/RadioButtonIcon.js
+++ b/packages/material-ui/src/Radio/RadioButtonIcon.js
@@ -57,7 +57,7 @@ RadioButtonIcon.propTypes = {
    * The size of the radio.
    * `small` is equivalent to the dense radio styling.
    */
-  fontSize: PropTypes.oneOf(['small', 'medium']),
+  fontSize: PropTypes.oneOf(['small', 'default']),
 };
 
 export default withStyles(styles, { name: 'PrivateRadioButtonIcon' })(RadioButtonIcon);

From 6ca3b34a259d18a484f1ecfa366641fc441df29f Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 5 Dec 2019 01:22:23 +0100
Subject: [PATCH 09/10] remove dead code

---
 docs/src/pages/components/radio-buttons/RadioButtons.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/src/pages/components/radio-buttons/RadioButtons.tsx b/docs/src/pages/components/radio-buttons/RadioButtons.tsx
index fd7ff9d72bbf8e..bd7afc74d8d4aa 100644
--- a/docs/src/pages/components/radio-buttons/RadioButtons.tsx
+++ b/docs/src/pages/components/radio-buttons/RadioButtons.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import { green } from '@material-ui/core/colors';
 import Radio, { RadioProps } from '@material-ui/core/Radio';
-import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
-import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
 
 const GreenRadio = withStyles({
   root: {

From 3ebeb50c8b35741cfd19ef48e94f8f4d0922f73e Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 7 Dec 2019 12:27:19 +0100
Subject: [PATCH 10/10] [Checkbox] Add size prop

---
 docs/pages/api/checkbox.md                    |  1 +
 .../pages/components/checkboxes/Checkboxes.js | 71 +++++++------------
 .../components/checkboxes/Checkboxes.tsx      | 71 +++++++------------
 .../material-ui/src/Checkbox/Checkbox.d.ts    |  1 +
 packages/material-ui/src/Checkbox/Checkbox.js | 14 +++-
 5 files changed, 64 insertions(+), 94 deletions(-)

diff --git a/docs/pages/api/checkbox.md b/docs/pages/api/checkbox.md
index 4ffe427ad4be27..40c85aa0b2c45c 100644
--- a/docs/pages/api/checkbox.md
+++ b/docs/pages/api/checkbox.md
@@ -38,6 +38,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">inputRef</span> | <span class="prop-type">ref</span> |  | Pass a ref to the `input` element. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean). |
 | <span class="prop-name">required</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be required. |
+| <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'</span> | <span class="prop-default">'medium'</span> | The size of the checkbox. `small` is equivalent to the dense checkbox styling. |
 | <span class="prop-name">type</span> | <span class="prop-type">string</span> |  | The input component prop `type`. |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The value of the component. The DOM API casts this to a string. |
 
diff --git a/docs/src/pages/components/checkboxes/Checkboxes.js b/docs/src/pages/components/checkboxes/Checkboxes.js
index 96fe42731ef4f6..b7a6e4131526a2 100644
--- a/docs/src/pages/components/checkboxes/Checkboxes.js
+++ b/docs/src/pages/components/checkboxes/Checkboxes.js
@@ -2,72 +2,51 @@ import React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
 
 export default function Checkboxes() {
-  const [state, setState] = React.useState({
-    checkedA: true,
-    checkedB: true,
-    checkedF: true,
-  });
+  const [checked, setChecked] = React.useState(true);
 
-  const handleChange = name => event => {
-    setState({ ...state, [name]: event.target.checked });
+  const handleChange = event => {
+    setChecked(event.target.checked);
   };
 
   return (
     <div>
       <Checkbox
-        checked={state.checkedA}
-        onChange={handleChange('checkedA')}
-        value="checkedA"
-        inputProps={{
-          'aria-label': 'primary checkbox',
-        }}
+        checked={checked}
+        onChange={handleChange}
+        value="primary"
+        inputProps={{ 'aria-label': 'primary checkbox' }}
       />
       <Checkbox
-        checked={state.checkedB}
-        onChange={handleChange('checkedB')}
-        value="checkedB"
+        defaultChecked
+        value="secondary"
         color="primary"
-        inputProps={{
-          'aria-label': 'secondary checkbox',
-        }}
-      />
-      <Checkbox
-        value="checkedC"
-        inputProps={{
-          'aria-label': 'uncontrolled-checkbox',
-        }}
-      />
-      <Checkbox
-        disabled
-        value="checkedD"
-        inputProps={{
-          'aria-label': 'disabled checkbox',
-        }}
+        inputProps={{ 'aria-label': 'secondary checkbox' }}
       />
+      <Checkbox value="uncontrolled" inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
+      <Checkbox disabled value="disabled" inputProps={{ 'aria-label': 'disabled checkbox' }} />
       <Checkbox
         disabled
         checked
-        value="checkedE"
-        inputProps={{
-          'aria-label': 'disabled checked checkbox',
-        }}
+        value="disabled checked"
+        inputProps={{ 'aria-label': 'disabled checked checkbox' }}
       />
       <Checkbox
-        checked={state.checkedF}
-        onChange={handleChange('checkedF')}
-        value="checkedF"
+        defaultChecked
+        value="indeterminate"
         indeterminate
-        inputProps={{
-          'aria-label': 'indeterminate checkbox',
-        }}
+        inputProps={{ 'aria-label': 'indeterminate checkbox' }}
       />
       <Checkbox
         defaultChecked
         color="default"
-        value="checkedG"
-        inputProps={{
-          'aria-label': 'checkbox with default color',
-        }}
+        value="default"
+        inputProps={{ 'aria-label': 'checkbox with default color' }}
+      />
+      <Checkbox
+        defaultChecked
+        size="small"
+        value="small"
+        inputProps={{ 'aria-label': 'checkbox with small size' }}
       />
     </div>
   );
diff --git a/docs/src/pages/components/checkboxes/Checkboxes.tsx b/docs/src/pages/components/checkboxes/Checkboxes.tsx
index 48844df006ea0c..0de890e3692e23 100644
--- a/docs/src/pages/components/checkboxes/Checkboxes.tsx
+++ b/docs/src/pages/components/checkboxes/Checkboxes.tsx
@@ -2,72 +2,51 @@ import React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
 
 export default function Checkboxes() {
-  const [state, setState] = React.useState({
-    checkedA: true,
-    checkedB: true,
-    checkedF: true,
-  });
+  const [checked, setChecked] = React.useState(true);
 
-  const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
-    setState({ ...state, [name]: event.target.checked });
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
   };
 
   return (
     <div>
       <Checkbox
-        checked={state.checkedA}
-        onChange={handleChange('checkedA')}
-        value="checkedA"
-        inputProps={{
-          'aria-label': 'primary checkbox',
-        }}
+        checked={checked}
+        onChange={handleChange}
+        value="primary"
+        inputProps={{ 'aria-label': 'primary checkbox' }}
       />
       <Checkbox
-        checked={state.checkedB}
-        onChange={handleChange('checkedB')}
-        value="checkedB"
+        defaultChecked
+        value="secondary"
         color="primary"
-        inputProps={{
-          'aria-label': 'secondary checkbox',
-        }}
-      />
-      <Checkbox
-        value="checkedC"
-        inputProps={{
-          'aria-label': 'uncontrolled-checkbox',
-        }}
-      />
-      <Checkbox
-        disabled
-        value="checkedD"
-        inputProps={{
-          'aria-label': 'disabled checkbox',
-        }}
+        inputProps={{ 'aria-label': 'secondary checkbox' }}
       />
+      <Checkbox value="uncontrolled" inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
+      <Checkbox disabled value="disabled" inputProps={{ 'aria-label': 'disabled checkbox' }} />
       <Checkbox
         disabled
         checked
-        value="checkedE"
-        inputProps={{
-          'aria-label': 'disabled checked checkbox',
-        }}
+        value="disabled checked"
+        inputProps={{ 'aria-label': 'disabled checked checkbox' }}
       />
       <Checkbox
-        checked={state.checkedF}
-        onChange={handleChange('checkedF')}
-        value="checkedF"
+        defaultChecked
+        value="indeterminate"
         indeterminate
-        inputProps={{
-          'aria-label': 'indeterminate checkbox',
-        }}
+        inputProps={{ 'aria-label': 'indeterminate checkbox' }}
       />
       <Checkbox
         defaultChecked
         color="default"
-        value="checkedG"
-        inputProps={{
-          'aria-label': 'checkbox with default color',
-        }}
+        value="default"
+        inputProps={{ 'aria-label': 'checkbox with default color' }}
+      />
+      <Checkbox
+        defaultChecked
+        size="small"
+        value="small"
+        inputProps={{ 'aria-label': 'checkbox with small size' }}
       />
     </div>
   );
diff --git a/packages/material-ui/src/Checkbox/Checkbox.d.ts b/packages/material-ui/src/Checkbox/Checkbox.d.ts
index 3270eb270f23cc..6931df5620daa0 100644
--- a/packages/material-ui/src/Checkbox/Checkbox.d.ts
+++ b/packages/material-ui/src/Checkbox/Checkbox.d.ts
@@ -9,6 +9,7 @@ export interface CheckboxProps
   icon?: React.ReactNode;
   indeterminate?: boolean;
   indeterminateIcon?: React.ReactNode;
+  size?: 'small' | 'medium';
 }
 
 export type CheckboxClassKey =
diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js
index 0b538602f4ef76..9a8a721b34e275 100644
--- a/packages/material-ui/src/Checkbox/Checkbox.js
+++ b/packages/material-ui/src/Checkbox/Checkbox.js
@@ -69,13 +69,13 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
     indeterminate = false,
     indeterminateIcon = defaultIndeterminateIcon,
     inputProps,
+    size = 'medium',
     ...other
   } = props;
 
   return (
     <SwitchBase
       type="checkbox"
-      checkedIcon={indeterminate ? indeterminateIcon : checkedIcon}
       classes={{
         root: clsx(classes.root, classes[`color${capitalize(color)}`], {
           [classes.indeterminate]: indeterminate,
@@ -88,7 +88,12 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
         'data-indeterminate': indeterminate,
         ...inputProps,
       }}
-      icon={indeterminate ? indeterminateIcon : icon}
+      icon={React.cloneElement(indeterminate ? indeterminateIcon : icon, {
+        fontSize: size === 'small' ? 'small' : 'default',
+      })}
+      checkedIcon={React.cloneElement(indeterminate ? indeterminateIcon : checkedIcon, {
+        fontSize: size === 'small' ? 'small' : 'default',
+      })}
       ref={ref}
       disabled={disabled}
       {...other}
@@ -160,6 +165,11 @@ Checkbox.propTypes = {
    * If `true`, the `input` element will be required.
    */
   required: PropTypes.bool,
+  /**
+   * The size of the checkbox.
+   * `small` is equivalent to the dense checkbox styling.
+   */
+  size: PropTypes.oneOf(['small', 'medium']),
   /**
    * The input component prop `type`.
    */