How to use Radio Component in Material UI ?
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.
Project Structure
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
|
Steps to run the application:
npm start
Output:
Reference: https://mui.com/material-ui/react-radio-button/#main-content
Last Updated :
08 Nov, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...