[docs] Add radio error demo (mui#19599)

EsoterikStare · Mar 30, 2020 · d8bb42e · d8bb42e
1 parent eaafc6d
commit d8bb42e
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 30 deletions.
diff --git a/docs/src/pages/components/radio-buttons/ErrorRadios.js b/docs/src/pages/components/radio-buttons/ErrorRadios.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormLabel from '@material-ui/core/FormLabel';
+import Button from '@material-ui/core/Button';
+
+const useStyles = makeStyles(theme => ({
+  formControl: {
+    margin: theme.spacing(3),
+  },
+  button: {
+    margin: theme.spacing(1, 1, 0, 0),
+  },
+}));
+
+export default function ErrorRadios() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState('');
+  const [error, setError] = React.useState(false);
+  const [helperText, setHelperText] = React.useState('Choose wisely');
+
+  const handleRadioChange = event => {
+    setValue(event.target.value);
+    setHelperText(' ');
+    setError(false);
+  };
+
+  const handleSubmit = event => {
+    event.preventDefault();
+
+    if (value === 'best') {
+      setHelperText('You got it!');
+      setError(false);
+    } else if (value === 'worst') {
+      setHelperText('Sorry, wrong answer!');
+      setError(true);
+    } else {
+      setHelperText('Please select an option.');
+      setError(true);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <FormControl component="fieldset" error={error} className={classes.formControl}>
+        <FormLabel component="legend">Pop quiz: Material-UI is...</FormLabel>
+        <RadioGroup aria-label="quiz" name="quiz" value={value} onChange={handleRadioChange}>
+          <FormControlLabel value="best" control={<Radio />} label="The best!" />
+          <FormControlLabel value="worst" control={<Radio />} label="The worst." />
+        </RadioGroup>
+        <FormHelperText>{helperText}</FormHelperText>
+        <Button type="submit" variant="outlined" color="primary" className={classes.button}>
+          Check Answer
+        </Button>
+      </FormControl>
+    </form>
+  );
+}
diff --git a/docs/src/pages/components/radio-buttons/ErrorRadios.tsx b/docs/src/pages/components/radio-buttons/ErrorRadios.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormLabel from '@material-ui/core/FormLabel';
+import Button from '@material-ui/core/Button';
+
+const useStyles = makeStyles(theme => ({
+  formControl: {
+    margin: theme.spacing(3),
+  },
+  button: {
+    margin: theme.spacing(1, 1, 0, 0),
+  },
+}));
+
+export default function ErrorRadios() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState('');
+  const [error, setError] = React.useState(false);
+  const [helperText, setHelperText] = React.useState('Choose wisely');
+
+  const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue((event.target as HTMLInputElement).value);
+    setHelperText(' ');
+    setError(false);
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (value === 'best') {
+      setHelperText('You got it!');
+      setError(false);
+    } else if (value === 'worst') {
+      setHelperText('Sorry, wrong answer!');
+      setError(true);
+    } else {
+      setHelperText('Please select an option.');
+      setError(true);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <FormControl component="fieldset" error={error} className={classes.formControl}>
+        <FormLabel component="legend">Pop quiz: Material-UI is...</FormLabel>
+        <RadioGroup aria-label="quiz" name="quiz" value={value} onChange={handleRadioChange}>
+          <FormControlLabel value="best" control={<Radio />} label="The best!" />
+          <FormControlLabel value="worst" control={<Radio />} label="The worst." />
+        </RadioGroup>
+        <FormHelperText>{helperText}</FormHelperText>
+        <Button type="submit" variant="outlined" color="primary" className={classes.button}>
+          Check Answer
+        </Button>
+      </FormControl>
+    </form>
+  );
+}
diff --git a/...radio-buttons/FormControlLabelPosition.js → ...adio-buttons/FormControlLabelPlacement.js b/...radio-buttons/FormControlLabelPosition.js → ...adio-buttons/FormControlLabelPlacement.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';
 
-export default function FormControlLabelPosition() {
-  const [value, setValue] = React.useState('top');
-
-  const handleChange = event => {
-    setValue(event.target.value);
-  };
-
+export default function FormControlLabelPlacement() {
   return (
     <FormControl component="fieldset">
       <FormLabel component="legend">labelPlacement</FormLabel>
-      <RadioGroup aria-label="position" name="position" value={value} onChange={handleChange} row>
+      <RadioGroup row aria-label="position" name="position" defaultValue="top">
         <FormControlLabel
           value="top"
           control={<Radio color="primary" />}
@@ -34,12 +28,7 @@ export default function FormControlLabelPosition() {
           label="Bottom"
           labelPlacement="bottom"
         />
-        <FormControlLabel
-          value="end"
-          control={<Radio color="primary" />}
-          label="End"
-          labelPlacement="end"
-        />
+        <FormControlLabel value="end" control={<Radio color="primary" />} label="End" />
       </RadioGroup>
     </FormControl>
   );

diff --git a/...adio-buttons/FormControlLabelPosition.tsx → ...dio-buttons/FormControlLabelPlacement.tsx b/...adio-buttons/FormControlLabelPosition.tsx → ...dio-buttons/FormControlLabelPlacement.tsx
@@ -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';
 
-export default function FormControlLabelPosition() {
-  const [value, setValue] = React.useState('top');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue((event.target as HTMLInputElement).value);
-  };
-
+export default function FormControlLabelPlacement() {
   return (
     <FormControl component="fieldset">
       <FormLabel component="legend">labelPlacement</FormLabel>
-      <RadioGroup aria-label="position" name="position" value={value} onChange={handleChange} row>
+      <RadioGroup row aria-label="position" name="position" defaultValue="top">
         <FormControlLabel
           value="top"
           control={<Radio color="primary" />}
@@ -34,12 +28,7 @@ export default function FormControlLabelPosition() {
           label="Bottom"
           labelPlacement="bottom"
         />
-        <FormControlLabel
-          value="end"
-          control={<Radio color="primary" />}
-          label="End"
-          labelPlacement="end"
-        />
+        <FormControlLabel value="end" control={<Radio color="primary" />} label="End" />
       </RadioGroup>
     </FormControl>
   );

diff --git a/docs/src/pages/components/radio-buttons/radio-buttons.md b/docs/src/pages/components/radio-buttons/radio-buttons.md
@@ -26,9 +26,15 @@ Radio buttons should have the most commonly used option selected by default.
 
 ## Label placement
 
-You can change the placement of the label:
+You can change the placement of the label with the `FormControlLabel` component's `labelPlacement` prop:
 
-{{"demo": "pages/components/radio-buttons/FormControlLabelPosition.js"}}
+{{"demo": "pages/components/radio-buttons/FormControlLabelPlacement.js"}}
+
+## Show error
+
+In general, radio buttons should have a value selected by default. If this is not the case, you can display an error if no value is selected when the form is submitted:
+
+{{"demo": "pages/components/radio-buttons/ErrorRadios.js"}}
 
 ## Customized radios