In this React tutorial, we will learn how to create a Radio button group in React Js using the modern React material UI library in a functional component.
React Material UI gives profound flexibility to React developers. So, we will learn how to customize radio button size, radio button color, and radio group direction with custom properties.
How To Implement radio Button In React With Material UI
Step 1- Set Up A New Project
The primary step is to set up Node, NPM and a code editor. The below command will be used for the purpose:
npx create-react-app react-blog-appNow, we get into the folder:
cd react-blog-app
Step 2- Configure React Material UI
The next step is to install the material UI and its core dependencies into the React project:
npm i @mui/material @emotion/react @emotion/stylednpm install @fontsource/roboto
Further, we will navigate to the App.css file in which we have to add the given code:
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");@import "@fontsource/roboto/300.css";
@import "@fontsource/roboto/400.css";
@import "@fontsource/roboto/500.css";
@import "@fontsource/roboto/700.css";
Step 3- Build The Function Component
For building the Radio button, we need a separate component. Hence, we make the components/ folder and the Form.js file:
import React from 'react'
function Form() {
return (
<div>Form</div>
)
}
export default Form
Step 4- Create Material UI Radio Button
RadioButton is a valuable wrapper mainly used to group Radio components. It instead offers a more straightforward API and proper keyboard accessibility to the group.
In order to create a simple Radio group, we must add the code below in the components/Form.js file:
import * as React from "react";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";
import FormLabel from "@mui/material/FormLabel";
export default function Form() {
return (
<FormControl>
<FormLabel id="demo-radio-buttons-group-label">Choose Gender</FormLabel>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="female"
name="radio-buttons-group"
>
<FormControlLabel value="female" control={<Radio />} label="Female" />
<FormControlLabel value="male" control={<Radio />} label="Male" />
<FormControlLabel value="other" control={<Radio />} label="Other" />
</RadioGroup>
</FormControl>
);
}
Step 5- Change TheRadio Button Direction
We can change the direction of the Rado group by using the row property. To set the buttons horizontally, we add the row prop in the RadioGroup:
import * as React from "react";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";
import FormLabel from "@mui/material/FormLabel";
export default function Form() {
return (
<FormControl>
<FormLabel id="demo-radio-buttons-group-label">Choose Gender</FormLabel>
<RadioGroup
row
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="female"
name="radio-buttons-group"
>
<FormControlLabel value="female" control={<Radio />} label="Female" />
<FormControlLabel value="male" control={<Radio />} label="Male" />
<FormControlLabel value="other" control={<Radio />} label="Other" />
</RadioGroup>
</FormControl>
);
}
Step 6- Customize Radio Button: Color, Size
Customization becomes relatively easy with material UI. In the following example, we will change the color and the size of the Radio group:
import * as React from "react";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";
import FormLabel from "@mui/material/FormLabel";
import { pink } from '@mui/material/colors';
export default function Form() {
const [selectedValue, setSelectedValue] = React.useState("a");
const handleChange = (event) => {
setSelectedValue(event.target.value);
};
const controlProps = (item) => ({
checked: selectedValue === item,
onChange: handleChange,
value: item,
name: "size-radio-button-demo",
inputProps: { "aria-label": item },
});
return (
<FormControl>
<FormLabel id="demo-radio-buttons-group-label">Choose Gender</FormLabel>
<RadioGroup
row
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="female"
name="radio-buttons-group"
>
<FormControlLabel
value="female"
control={<Radio {...controlProps("a")} size="small" />}
label="Female"
/>
<FormControlLabel
value="male"
control={
<Radio
{...controlProps("c")}
sx={{
"& .MuiSvgIcon-root": {
fontSize: 28,
color: pink[800],
"&.Mui-checked": {
color: pink[600],
},
},
}}
/>
}
label="Male"
/>
<FormControlLabel
value="other"
control={
<Radio
{...controlProps("c")}
sx={{
"& .MuiSvgIcon-root": {
fontSize: 32,
},
}}
/>
}
label="Other"
/>
</RadioGroup>
</FormControl>
);
}
Step 7- Update The Global Component
We have created a separate Form component. It is not registered in React. In order to register the Form component, we will add the Form component to the App.js file:
import React from "react";
import Form from "./components/Form";
function App() {
return (
<div>
<h2>React Material UI Radio Button Example</h2>
<Form />
</div>
);
}
export default App;
Step 8- Run The App On Browser
Now, we have reached the final step after which we have to invoke the React server.
We use the given command for doing so:
npm start
Conclusion
In this React tutorial, we learned how to build a simple Radio Button group in React Js app. We have also learned to use and configure the Material UI library In React.
Thanks