[Checkbox] Add TS demo for FormControlLabelPosition (#17964)

mui · Oct 21, 2019 · 1e4d2db · 1e4d2db
1 parent b711f56
commit 1e4d2db
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 11 deletions.
diff --git 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
@@ -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>
+  );
+}