From 1e4d2db346e0e31ac1b85d371ee9c375fb1545cc Mon Sep 17 00:00:00 2001
From: Yishai Burt <burtyish@users.noreply.github.com>
Date: Mon, 21 Oct 2019 15:42:04 +0300
Subject: [PATCH] [Checkbox] Add TS demo for FormControlLabelPosition (#17964)

---
 .../checkboxes/FormControlLabelPosition.js    | 14 ++-----
 .../checkboxes/FormControlLabelPosition.tsx   | 40 +++++++++++++++++++
 2 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 docs/src/pages/components/checkboxes/FormControlLabelPosition.tsx

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 (
     <FormControl component="fieldset">
-      <FormLabel component="legend">labelPlacement</FormLabel>
-      <FormGroup aria-label="position" name="position" value={value} onChange={handleChange} row>
+      <FormLabel component="legend">Label Placement</FormLabel>
+      <FormGroup aria-label="position" row>
         <FormControlLabel
           value="top"
           control={<Checkbox color="primary" />}
@@ -44,5 +38,3 @@ function FormControlLabelPosition() {
     </FormControl>
   );
 }
-
-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 (
+    <FormControl component="fieldset">
+      <FormLabel component="legend">Label Placement</FormLabel>
+      <FormGroup aria-label="position" row>
+        <FormControlLabel
+          value="top"
+          control={<Checkbox color="primary" />}
+          label="Top"
+          labelPlacement="top"
+        />
+        <FormControlLabel
+          value="start"
+          control={<Checkbox color="primary" />}
+          label="Start"
+          labelPlacement="start"
+        />
+        <FormControlLabel
+          value="bottom"
+          control={<Checkbox color="primary" />}
+          label="Bottom"
+          labelPlacement="bottom"
+        />
+        <FormControlLabel
+          value="end"
+          control={<Checkbox color="primary" />}
+          label="End"
+          labelPlacement="end"
+        />
+      </FormGroup>
+    </FormControl>
+  );
+}