Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add radio error demo #19599

Merged
merged 17 commits into from
Mar 4, 2020
Merged

[docs] Add radio error demo #19599

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
c3b4650
Added error
theswerd Feb 7, 2020
7cafd29
Yarn prettier
theswerd Feb 7, 2020
479ad98
Added new demo
theswerd Feb 7, 2020
5625834
update test types
theswerd Feb 7, 2020
87771b6
Update Import order
theswerd Feb 12, 2020
152b474
Updated Import order
theswerd Feb 12, 2020
fd95986
Made new changes
theswerd Feb 16, 2020
7e00ff6
Updated to work
theswerd Feb 16, 2020
b6b25db
Formatting
theswerd Feb 16, 2020
fc84907
Added white space
theswerd Feb 16, 2020
eef1574
Merge branch 'master' into HEAD
mbrookes Feb 16, 2020
9779ab3
WIP
mbrookes Feb 17, 2020
0c3ad02
improve demo
mbrookes Feb 21, 2020
9f2d773
prettier
mbrookes Feb 21, 2020
cef5793
Merge branch 'master' of https://github.com/mui-org/material-ui into …
mbrookes Mar 2, 2020
0e8c4e0
polish
oliviertassinari Mar 4, 2020
997cf00
Merge branch 'master' into pr/theswerd/19599
eps1lon Mar 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 62 additions & 0 deletions docs/src/pages/components/radio-buttons/ErrorRadios.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
62 changes: 62 additions & 0 deletions docs/src/pages/components/radio-buttons/ErrorRadios.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
17 changes: 3 additions & 14 deletions ...radio-buttons/FormControlLabelPosition.js → ...adio-buttons/FormControlLabelPlacement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />}
Expand All @@ -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>
);
Expand Down
17 changes: 3 additions & 14 deletions ...adio-buttons/FormControlLabelPosition.tsx → ...dio-buttons/FormControlLabelPlacement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />}
Expand All @@ -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>
);
Expand Down
10 changes: 8 additions & 2 deletions docs/src/pages/components/radio-buttons/radio-buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down