CoreCheckbox

레거시 체크박스 컴포넌트. Checkbox로 마이그레이션을 권장합니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 Checkbox를 사용하세요.

CoreCheckbox는 단일 컴포넌트 기반 체크박스입니다.

네이티브 <input type="checkbox"> 기반 — form 제출 호환
Indeterminate 상태 — indeterminate prop으로 중간 선택 표현
커스텀 라벨 — label에 ReactNode 전달 가능
Controlled / Uncontrolled 모두 지원

Usage

기본 사용법

<CoreCheckbox label="동의합니다" />

Controlled

() => {
const [checked, setChecked] = React.useState(false);
return (
  <CoreCheckbox
    label="제어된 체크박스"
    checked={checked}
    onChange={(e) => setChecked(e.target.checked)}
  />
);
}

Indeterminate 상태

<CoreCheckbox label="부분 선택" indeterminate />

비활성화 상태

<VStack $css={{ gap: '8px' }}>
<CoreCheckbox label="미체크 비활성" disabled />
<CoreCheckbox label="체크 비활성" checked disabled />
<CoreCheckbox label="Indeterminate 비활성" indeterminate disabled />
</VStack>

커스텀 라벨

<CoreCheckbox
label={
  <span>
    <strong>필수 약관</strong>에 동의합니다
  </span>
}
/>

Props

ComponentPropsWithoutRef<'input'>을 확장한 컴포넌트입니다.

Prop

Type

스타일

기본 스타일 속성

영역	속성
Label wrapper	`display: flex`, `gap: spacing-150 (6px)`, `min-height: 18px`
Input	`opacity: 0`, `position: absolute` (숨김, 커스텀 아이콘으로 대체)
Icon wrapper	`width: 16px`, `height: 16px`
Label text	`typography: body[2]`

States — 상태별 토큰

상태	아이콘 스타일
기본 (미체크)	`stroke: toggle-primary[3]`
기본 hover	`fill: toggle-hover-bg`
체크	`fill: toggle-primary[1]`
체크 hover	`fill: toggle-primary[2]`
Indeterminate	`fill: toggle-primary[1]`
Disabled	`fill: toggle-disabled-bg`, `stroke: toggle-disabled-border`
Focus	outline `stroke: focus` 색상

마이그레이션 가이드

Checkbox는 Compound composition 패턴으로 레이아웃 유연성이 높아졌습니다.

Before / After

// Before (CoreCheckbox)
<CoreCheckbox
  label="동의합니다"
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
/>

// After (Checkbox)
<Label.Root>
  <Checkbox checked={checked} onChange={(e) => setChecked(e.currentTarget.checked)} />
  <Label.Text>동의합니다</Label.Text>
</Label.Root>

변경 사항

CoreCheckbox	Checkbox + Label
`label` prop	`Label.Text` 서브컴포넌트
`onChange={(e) => ...}`	`onChange={(e) => ...}` (동일)
`indeterminate`	`indeterminate` (동일)
`labelClassName`	`Label.Text`의 `className`

On this page