React MUI Radio Input

0 0 2 minutes read

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

React MUI Radio Group Input is a group radio button that allows the user to select one option from a set. It must consist of the most commonly used option selected by default.

Radio Input variants:

Radio group: It is a wrapper used to group multiple radio components.
Standalone radio buttons: The radio buttons can be used standalone, without the RadioGroup wrapper.
Size: The size prop is used to control the radio sizes.
Color: The color prop is used to add the radio colors like secondary, success, and default.
Label placement: The label placement can be changed with the FormControlLabel component’s labelPlacement prop.
Show error: An error will be displayed if no value is selected when the form is submitted.
Customization: A radio can be customized with custom styles.
useRadioGroup: A useRadioGroup() hook is used for advanced customization.
Accessibility: To make it accessible make sure to have all form controls like having labels, etc.
API: The <FormControl />, <FormControlLabel />, <FormLabel />, <Radio />, <RadioGroup /> APIs are used.

Syntax:

<FormControl>
    <FormLabel>Label</FormLabel>
    <RadioGroup>
        <FormControlLabel control={<Radio />} 
                label="option1" />
        <FormControlLabel control={<Radio />} 
                label="option2" />
    </RadioGroup>
</FormControl>

Creating React Project:

Step 1: To create a react app, you need to install react modules through the npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

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

Project Structure:

Step to Run Application:

npm start

Example 1: Below example demonstrates the React MUI basic radio button input of different sizes and colors.

Javascript

import 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'; 
  
function App() { 
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: 'green' }}> 
                    zambiatek</h1> 
                <h2>React MUI Radio Input</h2> 
            </div> 
            <FormControl> 
                <FormLabel>Do you like zambiatek?</FormLabel> 
                <RadioGroup 
                    defaultValue="yes"
                    name="radio-buttons-group"
                > 
                    <FormControlLabel value="yes"
                        control={<Radio size="small"
                            color="success" />} label="Yes" /> 
                    <FormControlLabel 
                        value="no"
                        control={<Radio color="secondary" />} 
                        label="No" /> 
                </RadioGroup> 
            </FormControl> 
        </center> 
    ); 
} 
  
export default App;

Output:

Example 2: Below example demonstrates the React MUI radio button with different label placements.

Javascript

import 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'; 
  
function App() { 
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: 'green' }}>zambiatek</h1> 
                <h2>React MUI Radio Input</h2> 
            </div> 
            <FormControl> 
                <FormLabel>Rate GFG</FormLabel> 
                <RadioGroup 
                    row 
                    defaultValue="vm"
                    name="radio-buttons-group"
                > 
                    <FormControlLabel labelPlacement="start"
                        value="vm" control={<Radio size="small"
                            color="success" />} label="Very much" /> 
                    <FormControlLabel labelPlacement="top"
                        value="av" control={<Radio color="secondary" />} 
                        label="Average" /> 
                    <FormControlLabel labelPlacement="bottom"
                        value="no" control={<Radio color="secondary" />} 
                        label="Not much" /> 
                    <FormControlLabel labelPlacement="end"
                        value="vb" control={<Radio color="secondary" />} 
                        label="Very bad" /> 
                </RadioGroup> 
            </FormControl> 
        </center> 
    ); 
} 
  
export default App;

Output:

Reference: https://mui.com/material-ui/react-radio-button/

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!