}
+ control={}
label="Top"
labelPlacement="top"
/>
}
+ control={}
label="Start"
labelPlacement="start"
/>
}
+ control={}
label="Bottom"
labelPlacement="bottom"
/>
}
+ control={}
label="End"
labelPlacement="end"
/>
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 (
+
+ }
+ checkedIcon={}
+ name="checkedA"
+ inputProps={{ 'aria-label': 'favorite checkbox' }}
+ />
+ }
+ checkedIcon={}
+ name="checkedB"
+ inputProps={{ 'aria-label': 'bookmarked checkbox' }}
+ />
+
+ );
+}
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 (
+
+ }
+ checkedIcon={}
+ name="checkedA"
+ inputProps={{ 'aria-label': 'favorite checkbox' }}
+ />
+ }
+ checkedIcon={}
+ name="checkedB"
+ inputProps={{ 'aria-label': 'bookmarked checkbox' }}
+ />
+
+ );
+}
diff --git a/docs/src/pages/components/checkboxes/IndeterminateCheckbox.js b/docs/src/pages/components/checkboxes/IndeterminateCheckbox.js
index 3719fed69d9af1..1a711cb6adad49 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,34 +19,29 @@ export default function IndeterminateCheckbox() {
};
const children = (
-
+
- }
+ control={}
/>
- }
+ control={}
/>
-
+
);
return (
}
+ label="Parent"
/>
{children}
diff --git a/docs/src/pages/components/checkboxes/IndeterminateCheckbox.tsx b/docs/src/pages/components/checkboxes/IndeterminateCheckbox.tsx
index 7af5ed0f72ac16..775aa0aec42a5f 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) => {
@@ -28,34 +19,29 @@ export default function IndeterminateCheckbox() {
};
const children = (
-
+
- }
+ control={}
/>
- }
+ control={}
/>
-
+
);
return (
}
+ label="Parent"
/>
{children}
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 (
+
+
+
+
+
+ );
+}
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 (
+
+
+
+
+
+ );
+}
diff --git a/docs/src/pages/components/checkboxes/checkboxes.md b/docs/src/pages/components/checkboxes/checkboxes.md
index 463e9a12f12273..9358b4c824c74b 100644
--- a/docs/src/pages/components/checkboxes/checkboxes.md
+++ b/docs/src/pages/components/checkboxes/checkboxes.md
@@ -22,22 +22,46 @@ If you have a single option, avoid using a checkbox and use an on/off switch ins
{{"demo": "pages/components/checkboxes/Checkboxes.js"}}
-## Indeterminate
+## Label
-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.
+You can provide a label to the `Checkbox` thanks to the `FormControlLabel` component.
-{{"demo": "pages/components/checkboxes/IndeterminateCheckbox.js"}}
+{{"demo": "pages/components/checkboxes/CheckboxLabels.js"}}
-## Label
+## Size
-`Checkbox` can be provided with a label thanks to the `FormControlLabel` component.
+Use the `size` prop or customize the font size of the svg icons to change the size of the checkboxes.
-{{"demo": "pages/components/checkboxes/CheckboxLabels.js"}}
+{{"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
+
+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"}}
+
+> ⚠️ 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.
+`FormGroup` is a helpful wrapper used to group selection control components.
{{"demo": "pages/components/checkboxes/CheckboxesGroup.js"}}