MUI - Checkbox

Checkbox

checkbox란 사용자가 선택할 수 있는 체크박스를 생성하는 데 사용된다.

Material UI의 Checkbox 컴포넌트는 다양한 설정과 스타일링 옵션을 제공하여 하나 이상의 옵션을 선택 할 수 있다.

 

import { Checkbox } from "@mui/material";

function Mui() {
    const label = { inputProps: { 'aria-label': 'Checkbox demo' } }; // label속성을 선언한다

    return (
        <div>
            <Checkbox {...label} defaultChecked /> // defaultChecked 기본으로 체크표시 설정
            <Checkbox {...label} /> 
            <Checkbox {...label} disabled /> // 클릭 불가능 설정
            <Checkbox {...label} disabled checked /> // 체크표시 및 클릭 불가능 설정
        </div>
    );
}

export default Mui;

 

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

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

 

 

728x90

 

 

 

속성을 추가하여 기능 및 스타일을 구현시킬 수 있다.

<Checkbox {...label} defaultChecked size="small" /> // small 사이즈 설정
<Checkbox {...label} defaultChecked /> // 기본값 체크
<Checkbox {...label} defaultChecked sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}/>
 // 폰트크기 설정
 
<Checkbox {...label} defaultChecked color="secondary" /> // secondary 색 설정
<Checkbox {...label} defaultChecked color="success" /> // success 색 설정
<Checkbox {...label} defaultChecked color="default" /> // default 색 설정
<Checkbox
  {...label}
  defaultChecked
  sx={{
    color: pink[800], // material colors에서 색을 받아와 설정한다.
    '&.Mui-checked': {
      color: pink[600],
    },
  }}
/>

 

 

Material UI 의 아이콘을 받아와 좋아요 및 북마크 표시로 설정 할 수 있다.

Material Icon을 npm에 설치 해야 사용 가능하다.

 

 

반응형