How to use Radio Component in Material UI ?

Last Updated : 08 Nov, 2022

Radio buttons allow the user to select one option from a set. Material UI for React has this component available for us and it is very easy to integrate. We can use Radio Component in ReactJS using the following approach:

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui modules using the following command:

npm install @mui/material

Project Structure: It will look like the following.

Example 1: In this example, we will create a simple application that uses RadioGroup and FormControl components to display different controllable radio buttons. Please update the file App.js like below.

Filename: App.js

JavaScript

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 RadioButtonsGroup() {
    return (
        <FormControl>
            <FormLabel id="demo-radio-buttons-group-label">
                Geeksforgeeks
            </FormLabel>
            <RadioGroup
                defaultValue="Code addition"
            >
                <FormControlLabel value="code addition" 
                    control={<Radio />} label="Code Addition" />
                <FormControlLabel value="typo" 
                    control={<Radio />} label="Type" />
                <FormControlLabel value="other" 
                    control={<Radio />} label="Other" />
            </RadioGroup>
        </FormControl>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, we will create a simple application that uses Radio components to display standalone radio buttons with different colors. Please update the file App.js like below.

Filename: App.js

JavaScript

import { Radio } from '@mui/material';
import React from 'react'

const App = () => {

    return (
        <div>
            <Radio color='secondary' />
            <Radio color='default' />
            <Radio color='error' />
            <Radio color='success' />
            <Radio color='warning' />
        </div>
    );
}

export default App