React Material UI Customize and Implement Radio Button Tutorial

React Material UI Radio Button example. A radio button is the cardinal element of the form. The radio button or Radio group is a primary GUI element. A Radio button permits the user to pick one option from a collection.

In this tutorial, we will understand how to comfortably create a Radio Button group in React JS using the modern React material UI library in a functional component.

We will build a basic React app, load the imperative material ui and its dependencies and show you how to implement the Radio button in React function class.

React Material UI gives profound flexibility to React developers. It provides tons of UI components and gives you the flexibility to customize at your ease.

In this React Radio group button example, we will also explore 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 New Project
• Step 2: Configure React Material UI
• Step 3: Build Function Component
• Step 4: Create Material UI Radio Button
• Step 5: Change Radio Button Direction
• Step 6: Customize Radio Button
• Step 7: Update Global Component
• Step 8: Run App on Browser

Set Up New Project

In order to set up a React app. We need node, npm and a code editor, if you have put all the weapons in arsenal then go ahead and create the new app.

npx create-react-app react-blog-app

Make sure to get into the app folder.

cd react-blog-app

Configure React Material UI

Now, the project is created. Next, you have to install the material UI and its core dependencies into the React project.

npm i @mui/material @emotion/react @emotion/styled

npm install @fontsource/roboto

Navigate to App.css file, here in this file you 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";

Build Function Component

In order to build radio button, we need a separate component hence make the components/ folder, and the Form.js file.

import React from 'react'
function Form() {
  return (
    <div>Form</div>
  )
}
export default Form

Create Material UI Radio Button

RadioGroup is a valuable wrapper mainly used to group Radio components. It rather offers a more straightforward API, and proper keyboard accessibility to the group.

To create a simple radio group, you have to add the code 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>
  );
}

Change Radio Button Direction

You can change the direction of the Radio group by using the row property. To set the buttons horizontally, 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>
  );
}

Customize Radio Button: Color, Size

Customization is relatively easy with material UI. In the following example, we are simultaneously changing 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>
  );
}

Update Global Component

We created a separate Form component, that is not registered in the React. In order to register the Form component, add the Form component into 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;

Run App on Browser

We are almost done; the final task is to invoke the React app server.

After running the application, the app url will be printed on the console screen, and you can use that to view the app.

npm start

http://localhost:3000

Conclusion

In this step-by-step tutorial, you have seen how to build a simple radio button group in React. Not just that, we have also discovered how to use and configure the Material UI library in React.