Material-ui: How to display group of checkboxes and or radio buttons inline

[jmjpro]

neither
<Checkbox name="what_to_send" value="SMS" label="SMS" style={{display: 'inline'}}/>
nor
<RadioButton name="what_to_send" value="SMS" label="SMS" style={{display: 'inline'}}/>
works.

In fact, the style makes it so the user can't click on the checkbox/radio button, or at least the click isn't visible.

[jofomah]

i will also like to know the solution to this, if any

[newoga]

@jmjpro @jofomah This may be a better question for StackOverflow. There is no material-ui API for making checkboxes inline. You may want to look at using flex layout to achieve this for now...

Something like this, while not elegant, should work:

const Example = (props) => {
  return (
    <div style={{display: 'flex', flexDirection: 'row'}}>
       <div><Checkbox /></div>
       <div><Checkbox /></div>
    </div>
  );
};

You could also create your own component wrappers that implement this behavior.

Edit: fixed example per @jackypan1989

[fpaboim]

How would I do this with radio buttons? It seems that if the radio buttons are not direct descendants of the RadioButtonGroup and I add divs to make the layout inline the radio buttons break...

[jackypan1989]

@newoga it should be {display: 'flex'}

[newoga]

@newoga it should be {display: 'flex'}

@jackypan1989 Thanks! You're absolutely right, my mistake. :+1:

[jmjpro]

With display flex it looks like this. I can't get the checkboxes closer together because MUI sets a width of 100% of the contained elements and the Checkbox component provides no mechanism to style the contained .

I'm happy to try to submit a PR to fix this...

[josephMG]

Try this:

            <Checkbox
              className={'col-xs-4 col-md-3'}
              style={{display:'block', width: ''}}
            />

use WRONG width to override 'width:100%', so that width will be set bootstraps col-*-4

Sorry it may be a wrong way, but it can solve this problem until someone send a PR.

[vorlov]

worked for me:
<RadioButtonGroup name="status" defaultSelected="Running">
<RadioButton style={{ display: 'inline-block', width: '150px' }} label="Running" value="Running" />
<RadioButton style={{ display: 'inline-block', width: '150px', marginLeft: '50px' }} label="Paused" value="Paused" />
</RadioButtonGroup>

[torstenrudolf]

I am wondering why this ticket was closed. @nathanmarks is this workaround the official solution to have inline radiobuttons?

[davidbiehl]

For radio buttons, I found a combination of a flexbox container on the RadioButtonGroup and display: inline for the RadioButtons laid them out nice and even:

<RadioButtonGroup
  style={{display: 'flex', flexDirection: 'row'}}
>
  <RadioButton value="1" label="One" style={{display: 'inline-block'}} />
  <RadioButton value="2" label="Two" style={{display: 'inline-block'}} />
  <RadioButton value="3" label="Three" style={{display: 'inline-block'}} />
</RadioButtonGroup>

[thundermiracle]

If you want to make it responsive, you'd better add "flexWrap: wrap" to group component and "width: auto" to radiobutton components.

<RadioButtonGroup  style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between'}}>
  <RadioButton value="1" label="One" style={{display: 'inline-block', width: 'auto'}} />
  <RadioButton value="2" label="Two" style={{display: 'inline-block', width: 'auto'}} />
  <RadioButton value="3" label="Three" style={{display: 'inline-block', width: 'auto'}} />
</RadioButtonGroup>

[El-Mahbub]

radio_group: { display: 'inline-table', padding: '0px' },
<FormControl className={classes.control}> <FormLabel component="legend">Jenis kelamin</FormLabel> <RadioGroup className={classes.radio_group} aria-label="gender" name="gender" onChange={this.inputValue} value={this.state.gender}> <FormControlLabel value="male" control={<Radio/>} label="Pria"/> <FormControlLabel value="female" control={<Radio/>} label="Wanita"/> </RadioGroup> </FormControl>

I just using inline-table :yum:

[kiranvj]

You can use Grid

<RadioGroup aria-label="gender" name="gender1">
  <Grid container>
    <Grid item>
      <FormControlLabel
        value="male"
        control={<Radio />}
        label="Male"
      />
    </Grid>
    <Grid item>
      <FormControlLabel
        value="female"
        control={<Radio />}
        label="Female"
      />
    </Grid>
  </Grid>
</RadioGroup>

[Semigradsky]

Just use the row property:

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