Skip to content

Commit

Permalink
Add TypeScript demo for SwitchesGroup componenet
Browse files Browse the repository at this point in the history
  • Loading branch information
Brandon Herrera authored and Brandon Herrera committed Apr 19, 2019
1 parent a61b120 commit 144b4b9
Showing 1 changed file with 44 additions and 0 deletions.
44 changes: 44 additions & 0 deletions docs/src/pages/demos/selection-controls/SwitchesGroup.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from 'react';
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 Switch from '@material-ui/core/Switch';

function SwitchesGroup() {
const [state, setState] = React.useState({
gilad: true,
jason: false,
antoine: true,
});

const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
setState({ ...state, [name]: event.target.checked });
};

return (
<FormControl component="fieldset">
<FormLabel component="legend">Assign responsibility</FormLabel>
<FormGroup>
<FormControlLabel
control={<Switch checked={state.gilad} onChange={handleChange('gilad')} value="gilad" />}
label="Gilad Gray"
/>
<FormControlLabel
control={<Switch checked={state.jason} onChange={handleChange('jason')} value="jason" />}
label="Jason Killian"
/>
<FormControlLabel
control={
<Switch checked={state.antoine} onChange={handleChange('antoine')} value="antoine" />
}
label="Antoine Llorca"
/>
</FormGroup>
<FormHelperText>Be careful</FormHelperText>
</FormControl>
);
}

export default SwitchesGroup;

0 comments on commit 144b4b9

Please sign in to comment.