Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 960
jay.m Avatar asked Nov 12 '15 19:11

jay.m


People also ask

How do I align a radio button horizontally in HTML?

To make a horizontal radio button set, add the data-type="horizontal" to the fieldset . The framework will float the labels so they sit side-by-side on a line, hide the radio button icons and only round the left and right edges of the group.


1 Answers

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> 
like image 53
HydraHatRack Avatar answered Sep 21 '22 15:09

HydraHatRack