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:
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.
Step to Run Application: Run the application using the following command from the root directory of the project:
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.
Steps to run the application: