-
-
Notifications
You must be signed in to change notification settings - Fork 31.8k
/
CheckboxesGroup.tsx
85 lines (79 loc) · 2.77 KB
/
CheckboxesGroup.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import React from 'react';
import { makeStyles, Theme } from '@material-ui/core/styles';
import FormLabel from '@material-ui/core/FormLabel';
import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormHelperText from '@material-ui/core/FormHelperText';
import Checkbox from '@material-ui/core/Checkbox';
const useStyles = makeStyles((theme: Theme) => ({
root: {
display: 'flex',
},
formControl: {
margin: theme.spacing(3),
},
}));
function CheckboxesGroup() {
const classes = useStyles();
const [state, setState] = React.useState({
gilad: true,
jason: false,
antoine: false,
});
const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
setState({ ...state, [name]: event.target.checked });
};
const { gilad, jason, antoine } = state;
const error = [gilad, jason, antoine].filter(v => v).length !== 2;
return (
<div className={classes.root}>
<FormControl component={'fieldset' as 'div'} className={classes.formControl}>
<FormLabel component={'legend' as 'label'}>Assign responsibility</FormLabel>
<FormGroup>
<FormControlLabel
control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
label="Gilad Gray"
/>
<FormControlLabel
control={<Checkbox checked={jason} onChange={handleChange('jason')} value="jason" />}
label="Jason Killian"
/>
<FormControlLabel
control={
<Checkbox checked={antoine} onChange={handleChange('antoine')} value="antoine" />
}
label="Antoine Llorca"
/>
</FormGroup>
<FormHelperText>Be careful</FormHelperText>
</FormControl>
<FormControl
required
error={error}
component={'fieldset' as 'div'}
className={classes.formControl}
>
<FormLabel component={'legend' as 'label'}>Pick two</FormLabel>
<FormGroup>
<FormControlLabel
control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
label="Gilad Gray"
/>
<FormControlLabel
control={<Checkbox checked={jason} onChange={handleChange('jason')} value="jason" />}
label="Jason Killian"
/>
<FormControlLabel
control={
<Checkbox checked={antoine} onChange={handleChange('antoine')} value="antoine" />
}
label="Antoine Llorca"
/>
</FormGroup>
<FormHelperText>You can display an error</FormHelperText>
</FormControl>
</div>
);
}
export default CheckboxesGroup;