CoreCheckbox

Usage

기본 사용법

import { CoreCheckbox } from '@featuring-corp/components';

<CoreCheckbox label="라벨" />

제어된 컴포넌트 (Controlled Component)

import { useState } from 'react';
import { CoreCheckbox } from '@featuring-corp/components';

const [checked, setChecked] = useState(false);

<CoreCheckbox 
  label="라벨" 
  checked={checked} 
  onChange={(e) => setChecked(e.target.checked)} 
/>

비제어 컴포넌트 (Uncontrolled Component)

import { CoreCheckbox } from '@featuring-corp/components';

<CoreCheckbox label="라벨" defaultChecked />

Indeterminate 상태

import { CoreCheckbox } from '@featuring-corp/components';

<CoreCheckbox label="라벨" indeterminate />

비활성화 상태

import { CoreCheckbox } from '@featuring-corp/components';

<CoreCheckbox label="라벨" disabled />
<CoreCheckbox label="라벨" checked disabled />
<CoreCheckbox label="라벨" indeterminate disabled />

커스텀 라벨

import { CoreCheckbox } from '@featuring-corp/components';

<CoreCheckbox 
  label={
    <div>
      <strong>강조된 텍스트</strong>
      <span>일반 텍스트</span>
    </div>
  } 
/>

Props

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

Prop

Type

스타일

기본 스타일 속성

Label:

display: flex
justify-content: flex-start
gap: spacing-150 (6px)
width: 100%
height: 100%
min-height: 18px

인접 Checkbox:

margin-top: spacing-100 (4px) - 연속된 체크박스 사이 여백

Input:

opacity: 0
position: absolute

Icon Wrapper:

display: none (기본값, 상태에 따라 변경)
position: relative
width: 16px
height: 16px
cursor: pointer

Icon:

position: absolute
top: 50%
left: 50%
width: 18px
height: 18px
transform: translate(-50%, -50%)

Label Text:

typography: body[2]
color: inherit

States (상태별 토큰)

Icon Wrapper:

Disabled: cursor: not-allowed

Icon (Default - 체크되지 않은 상태):

Default: stroke: toggle-primary[3]
Hover (not disabled): fill: toggle-hover-bg
Disabled: fill: toggle-disabled-bg, stroke: toggle-disabled-border

Icon (Checked - 체크된 상태):

Default: fill: toggle-primary[1]
Hover (not disabled): fill: toggle-primary[2]
Disabled: fill: toggle-disabled-border

Icon (Indeterminate - 중간 상태):

Default: fill: toggle-primary[1]
Hover (not disabled): fill: toggle-primary[2]
Disabled: fill: toggle-disabled-border

Icon (Outline - Focus 상태):

Default: display: none
Focus: display: block, stroke: focus 색상

Label Text:

Disabled: color: toggle-disabled-text, cursor: not-allowed

On this page