Sometimes, we want to get input radio elements to horizontally align in React Material UI.

In this article, we’ll look at how to get input radio elements to horizontally align in React Material UI.

How to get input radio elements to horizontally align in React Material UI?

To get input radio elements to horizontally align in React Material UI, we can add the row prop to the RadioGroup component.

For instance, we write:

import React, { useState } from "react";
import { RadioGroup, FormControlLabel, Radio } from "@material-ui/core";

export default function App() {
  const [value, setValue] = useState();

  return (
    <div>
      <RadioGroup value={value} row onChange={setValue}>
        <FormControlLabel value="true" control={<Radio />} label="Yes" />
        <FormControlLabel value="false" control={<Radio />} label="No" />
      </RadioGroup>
    </div>
  );
}

We add the RadioGroup component with the row prop to disable the choices in a row.

And we set the onChange prop to setValue to set the selected choice as the value of the value state.

Inside RadioGroup, we add the FormControlLabel components and we set the control prop to <Radio /> to render the radio button.

The label prop are set to the values of the labels.

Conclusion

To get input radio elements to horizontally align in React Material UI, we can add the row prop to the RadioGroup component.