Checkbox

사용법

레이블

label과 description으로 체크박스의 의미를 전달해요. 필수·선택 항목을 구분해 표시해요.

스타일 커스터마이징

Checkbox 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.

className / style

<Checkbox
  className="shadow-md"
  style={{
    --gtd-checkbox-bg: "#059669",
  }}
/>

classNames 슬롯

복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.

<Checkbox
  classNames={{
    root: "my-checkbox-root",
    copy: "my-checkbox-copy",
    label: "my-checkbox-label",
    description: "my-checkbox-description",
    control: "my-checkbox-control"
  }}
/>

CSS 변수

인터페이스

CheckboxProps

가져오기

import { Checkbox } from "@/components/ui/Checkbox";