CODEWITHSUNDEEP
cssreactjsmaterial-ui
jay.m
jay.m

Reputation: 1628

How can I get input radio elements to horizontally align in react [material-ui]?

The radio group is always vertical listed in material-ui. Is there a way to horizontally align them? e.g. all radio button in one horizontal line.

Upvotes: 52

Views: 54121

Answers (6)

Jay
Jay

Reputation: 349

You just need to mention row in <RadioGroup>. You can write your code like this:

      <FormControl component="fieldset">
        <FormLabel >Lable</FormLabel>
        <RadioGroup aria-label="overall_sal" name="Overall SAL" value={value} onChange={handleChange} row>
          <FormControlLabel value="low" control={<Radio />} label="Low" />
        </RadioGroup>
      </FormControl>

Upvotes: 3

HydraHatRack
HydraHatRack

Reputation: 1300

Simply use the row property:

<RadioGroup row><Radio /><Radio /></RadioGroup>

RadioGroup inherits from FormGroup so the properties of the FormGroup component are also available.

Another example, with labels:

<RadioGroup aria-label="anonymous" name="anonymous" value={false} row>
  <FormControlLabel value="true" control={<Radio />} label="Yes" />
  <FormControlLabel value="false" control={<Radio />} label="No" />
</RadioGroup>

Upvotes: 106

noone
noone

Reputation: 6558

Simply add the prop row={true} on the RadioGroup control.

 <RadioGroup
      aria-label="Location"
      name="location"
      className={classes.group}
      value={location}
      onChange={handleChange}
      row={true}
      >
         <FormControlLabel value="company" control={<Radio />} label="Company" />
         <FormControlLabel value="home" control={<Radio />} label="Home" />
         <FormControlLabel value="other" control={<Radio />} label="Other" />
 </RadioGroup>

Upvotes: 10

Borzh
Borzh

Reputation: 5195

For those who are still struggling, use this style:

const styles = theme => ({
    group: {
        width: 'auto',
        height: 'auto',
        display: 'flex',
        flexWrap: 'nowrap',
        flexDirection: 'row',
    }
});

class MyComponent extends React.Component {

    render() {
        const { classes } = this.props;

        <RadioGroup className={classes.group} ...>
    }

};

export default withStyles(styles)(MyComponent);

Upvotes: 7

noxasaxon
noxasaxon

Reputation: 2423

I cant comment yet, but to add to what @lambdakris said: You may also need to add flexDirection: 'row'. The easiest way to make these changes instead of using the inline styles is to add your css to the styles object and class that material-ui already uses. 

const styled = theme => ({
 formControl: {
                margin: theme.spacing.unit * 3,
                width: "100%", //parent of radio group
              },
       group: {
               flexDirection: 'row',
               justifyContent: 'space-around',
               }
             });
...........
<RadioButtonGroup className={classes.group}>

Upvotes: 0

lambdakris
lambdakris

Reputation: 675

To render the radio buttons in a row:

<RadioButtonGroup style={{ display: 'flex' }}>

To reset sizing according to content:

<RadioButton style={{ width: 'auto' }} />

Upvotes: 24

Related Questions