diff --git a/docs/src/pages/components/checkboxes/FormControlLabelPosition.js b/docs/src/pages/components/checkboxes/FormControlLabelPosition.js
index b7074a7a527636..92c3b5b72c0b88 100644
--- a/docs/src/pages/components/checkboxes/FormControlLabelPosition.js
+++ b/docs/src/pages/components/checkboxes/FormControlLabelPosition.js
@@ -5,17 +5,11 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
-function FormControlLabelPosition() {
- const [value, setValue] = React.useState('female');
-
- const handleChange = event => {
- setValue(event.target.value);
- };
-
+export default function FormControlLabelPosition() {
return (
- labelPlacement
-
+ Label Placement
+
}
@@ -44,5 +38,3 @@ function FormControlLabelPosition() {
);
}
-
-export default FormControlLabelPosition;
diff --git a/docs/src/pages/components/checkboxes/FormControlLabelPosition.tsx b/docs/src/pages/components/checkboxes/FormControlLabelPosition.tsx
new file mode 100644
index 00000000000000..92c3b5b72c0b88
--- /dev/null
+++ b/docs/src/pages/components/checkboxes/FormControlLabelPosition.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormLabel from '@material-ui/core/FormLabel';
+
+export default function FormControlLabelPosition() {
+ return (
+
+ Label Placement
+
+ }
+ label="Top"
+ labelPlacement="top"
+ />
+ }
+ label="Start"
+ labelPlacement="start"
+ />
+ }
+ label="Bottom"
+ labelPlacement="bottom"
+ />
+ }
+ label="End"
+ labelPlacement="end"
+ />
+
+
+ );
+}