체크박스 (Checkbox)

Usage

1import { Checkbox } from "podo-ui/react";2import "podo-ui/styles.css";3
4<Checkbox label="이용약관 동의" defaultChecked />

크기 (size)

체크박스 크기는 사용 위치와 정보 밀도에 따라 md(base), lg로 구분해 사용해요. md는 폼이나 목록처럼 항목이 촘촘히 모이는 일반적인 상황에, lg는 모바일이나 터치 영역 확보가 필요한 화면, 시각적 강조가 필요한 선택에 사용하며, 함께 놓이는 텍스트·요소와 균형을 맞춰 정렬을 유지해요. 박스는 18px로 고정되고 크기는 라벨 텍스트에 적용돼요.

상태 (state)

체크박스 상태는 선택 정도에 따라 unchecked, checked, indeterminate로 구분해 표현해요. unchecked는 선택되지 않은 기본 상태, checked는 항목이 선택된 상태를, indeterminate는 하위 항목 중 일부만 선택된 부분 선택 상태를 나타내요. indeterminate는 주로 상위 체크박스가 자식 항목의 전체·일부·미선택을 한 번에 보여줄 때 사용하며, 선택할 수 없는 경우 disabled를 더해 비활성 상태임을 함께 구분해요.

강조 (bold)

체크박스는 함께 표시되는 레이블 텍스트의 강조 정도를 bold로 조절해요. 기본은 일반 굵기로 본문과 자연스럽게 어울리게 하고, bold는 항목의 중요도가 높거나 그룹의 제목·대표 선택지처럼 강조가 필요할 때 사용해요.

속성 (props)

podo-ui/react의 Checkbox가 받는 속성이에요. 시안의 state(checked·unchecked)는 웹 표준 input[type=checkbox]에 맞춘 checked로, indeterminate는 별도 속성으로 표현돼요(스크린리더에는 mixed로 안내). checked를 생략하면 스스로 상태를 관리하는 비제어형으로 동작하고, 표준 input 속성(name, className, aria-* 등)도 그대로 전달돼요.