MUI - Radio Group

Radio Group

Radio Group 이란 라디오 버튼들을 그룹화 시켜 라디오 버튼 기능을 제공하는 Materal UI 의 컴포넌트이다.

RadioGroup 컴포넌트와 FormControlLabel, Radio 컴포넌트속 속성을 추가하여 기능 및 디자인을 설정한다.

 

import { Checkbox, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup } from "@mui/material";

function Mui() {
    const label = { inputProps: { 'aria-label': 'Checkbox demo' } };

    return (
        <FormControl> // form 을 제어하는 컴포넌트
            <FormLabel id="demo-radio-buttons-group-label">Gender</FormLabel> // 그룹의 label 컴포넌트
            <RadioGroup // Radio group 컴포넌트
                aria-labelledby="demo-radio-buttons-group-label"
                defaultValue="female"
                name="radio-buttons-group"
            >
                <FormControlLabel value="female" control={<Radio />} label="Female" />
                <FormControlLabel value="male" control={<Radio />} label="Male" />
                <FormControlLabel value="other" control={<Radio />} label="Other" />
            </RadioGroup>
        </FormControl>
    );
}

export default Mui;

 

리액트에서 Material UI Radio Group 태그를 사용하여 스타일 및 기능을 구현 할 수 있다.

코드를 구현한 화면은 아래와 같다.

 

 

728x90

 

 

Radio Group에 row 속성을 추가하여 가로로 나타낼 수 있다.

<RadioGroup 
    row // 가로 속성 추가
    aria-labelledby="demo-radio-buttons-group-label"
    defaultValue="female"
    name="radio-buttons-group"
>

 

Radio 컴포넌트에 속성을 추가하여 색 또는 크기를 변경할 수 있다.

<Radio/>
<Radio color="secondary" size="small" /> // small 사이즈, secondary 색
<Radio color="success" size="medium"/> // medium 사이즈, success 색
<Radio color="default" /> // default 색

 

 

반응형

 

 

FormControlLabel 컴포넌트에 labelPlacement속성을 추가하여 Label의 위치를 변경 할 수 있다.

<FormControl>
    <FormLabel id="demo-form-control-label-placement">Label placement</FormLabel>
    <RadioGroup
        row
        aria-labelledby="demo-form-control-label-placement"
        name="position"
        defaultValue="top"
    >
        <FormControlLabel
            value="top"
            control={<Radio />}
            label="Top"
            labelPlacement="top" // 라벨이 위에 있다.
        />
        <FormControlLabel
            value="start"
            control={<Radio />}
            label="Start"
            labelPlacement="start" // 라벨이 왼쪽 시작부분에있다.
        />
        <FormControlLabel
            value="bottom"
            control={<Radio />}
            label="Bottom"
            labelPlacement="bottom" // 라벨이 아래에 있다.
        />
        <FormControlLabel value="end" control={<Radio />} label="End" /> // 라벨이 기본으로 오른쪽에 있다.
    </RadioGroup>
</FormControl>