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
| inputRef | ref | | Pass a ref to the `input` element. |
| onChange | func | | Callback fired when the state is changed.
**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean). |
| required | bool | | If `true`, the `input` element will be required. |
+| size | 'small'
| 'medium' | 'medium' | The size of the checkbox. `small` is equivalent to the dense checkbox styling. |
| type | string | | The input component prop `type`. |
| value | any | | The value of the component. The DOM API casts this to a string. |
diff --git a/docs/pages/api/radio.md b/docs/pages/api/radio.md
index 404ec1ea1b125a..81cf13146a8198 100644
--- a/docs/pages/api/radio.md
+++ b/docs/pages/api/radio.md
@@ -37,6 +37,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| name | string | | Name attribute of the `input` element. |
| onChange | func | | Callback fired when the state is changed.
**Signature:**
`function(event: object) => void`
*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). |
| required | bool | | If `true`, the `input` element will be required. |
+| size | 'small'
| 'medium' | 'medium' | The size of the radio. `small` is equivalent to the dense radio styling. |
| type | string | | The input component prop `type`. |
| value | any | | 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 (
-
-
+
+
+
);
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) => {
- setState({ ...state, [name]: event.target.checked });
+ const handleChange = (event: React.ChangeEvent) => {
+ setChecked(event.target.checked);
};
return (
-
-
+
+
+
);
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={}
- checkedIcon={}
+ size="small"
/>
);
diff --git a/docs/src/pages/components/radio-buttons/RadioButtons.tsx b/docs/src/pages/components/radio-buttons/RadioButtons.tsx
index ac30f0467112e1..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: {
@@ -60,8 +58,7 @@ export default function RadioButtons() {
color="default"
name="radio-button-demo"
inputProps={{ 'aria-label': 'E' }}
- icon={}
- checkedIcon={}
+ size="small"
/>
);
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 (
({
* @ignore - internal component.
*/
function RadioButtonIcon(props) {
- const { checked, classes } = props;
+ const { checked, classes, fontSize } = props;
return (
-
-
+
+
);
}
@@ -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', 'default']),
};
export default withStyles(styles, { name: 'PrivateRadioButtonIcon' })(RadioButtonIcon);