https://i.stack.imgur.com/Yt4ya.png
Check out the demo above to see the code in action. I'm currently struggling to align the radio buttons horizontally, wondering if there's an easier way to achieve this using Material-UI.
Is there a simple solution within Material-UI for horizontal alignment of radio buttons? Or should I just go ahead and style my own buttons, which would probably take me only 5 minutes?
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormHelperText from "@material-ui/core/FormHelperText";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";
const styles = theme => ({
root: {
display: "flex"
},
formControl: {
float: "left",
margin: theme.spacing.unit * 3
},
group: {
margin: `${theme.spacing.unit}px 0`
}
});
class RadioButtonsGroup extends React.Component {
state = {
value: "female"
};
handleChange = event => {
this.setState({ value: event.target.value });
};
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<FormControl
component="fieldset"
required
className={classes.formControl}
>
<FormLabel component="legend">Gender</FormLabel>
<RadioGroup
aria-label="gender"
name="gender1"
className={classes.group}
value={this.state.value}
onChange={this.handleChange}
>
<FormControlLabel
value="female"
control={<Radio />}
label="Female"
/>
<FormControlLabel value="male" control={<Radio />} label="Male" />
<FormControlLabel value="other" control={<Radio />} label="Other" />
<FormControlLabel
value="disabled"
disabled
control={<Radio />}
label="(Disabled option)"
/>
</RadioGroup>
</FormControl>
<FormControl
component="fieldset"
required
error
className={classes.formControl}
>
<FormLabel component="legend">Gender</FormLabel>
<RadioGroup
aria-label="gender"
name="gender2"
className={classes.group}
value={this.state.value}
onChange={this.handleChange}
>
<FormControlLabel
value="male"
control={<Radio color="primary" />}
label="Male"
/>
<FormControlLabel
value="female"
control={<Radio color="primary" />}
label="Female"
/>
<FormControlLabel
value="other"
control={<Radio color="primary" />}
label="Other"
/>
<FormControlLabel
value="disabled"
disabled
control={<Radio />}
label="(Disabled option)"
/>
</RadioGroup>
<FormHelperText>You can display an error</FormHelperText>
</FormControl>
</div>
);
}
}
RadioButtonsGroup.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(RadioButtonsGroup);