React MUI单选框输入

React MUI 是一个UI库，提供了装载完整的组件，引入我们自己的设计系统到我们准备好的组件中。MUI是一个用户界面库，为更快捷、更容易的Web开发提供了预定义和可定制的React组件，这些Material-UI组件基于Google的Material Design。

React MUI单选组输入 是一个组单选按钮，允许用户从一组选项中选择一个选项。它必须包含默认选择的最常用选项。

单选输入变体：

单选组： 它是一个包装器，用于将多个单选组件分组。
独立单选按钮： 可以单独使用单选按钮，而不需要RadioGroup包装器。
大小： 大小属性用于控制单选按钮的大小。
颜色： 颜色属性用于添加单选按钮的颜色，如次要，成功和默认。
标签位置： 可以使用FormControlLabel组件的labelPlacement属性来更改标签位置。
显示错误： 如果在提交表单时未选择任何值，将显示错误。
自定义： 可以使用自定义样式来自定义单选按钮。
useRadioGroup： 高级定制使用useRadioGroup()钩子。
可访问性： 要使其可访问，确保具有所有表单控件，如标签等。
API： 使用<FormControl />，<FormControlLabel />，<FormLabel />，<Radio />，和<RadioGroup />这些API。

语法：

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

创建React项目：

步骤1： 要创建一个React应用，你需要通过npm命令安装React模块。

npm create-react-app project name

步骤2： 创建完React项目后，进入文件夹执行不同操作。

cd project name

步骤3： 创建ReactJS应用程序后，使用以下命令安装所需模块：

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

项目结构:

React MUI单选框输入

运行应用的步骤：

npm start

示例1：

下面的示例演示了React MUI基本的不同大小和颜色的单选按钮输入。

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' }}> 
                    GeeksforGeeks</h1> 
                <h2>React MUI Radio Input</h2> 
            </div> 
            <FormControl> 
                <FormLabel>Do you like GeeksforGeeks?</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;

输出：

React MUI单选框输入

示例2：

下面的示例演示了具有不同标签放置方式的React MUI单选按钮。

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' }}>GeeksforGeeks</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;