Checkbox

체크박스 컴포넌트 (불확정 상태 지원)

Checkbox#

하나 이상의 항목을 선택할 수 있는 체크박스 컴포넌트입니다. 불확정(indeterminate) 상태를 지원합니다.

사용법#

// 기본 체크박스
CouiCheckbox(
  value: isChecked,
  onChanged: handleToggle,
)

// 라벨 포함
CouiCheckbox(
  value: agreeTerms,
  onChanged: handleAgreeChange,
  label: '이용약관에 동의합니다',
)

// 불확정 상태
CouiCheckbox(
  value: true,
  tristate: true,
  isIndeterminate: hasPartialSelection,
  onChanged: handleSelectAll,
  label: '전체 선택',
)

Checkbox(
  checked: isChecked,
  onChange: handleToggle,
)

Checkbox(
  checked: agreeTerms,
  onChange: handleAgreeChange,
  label: '이용약관에 동의합니다',
)

Props / Parameters#

속성	타입	기본값	설명
`value`	`bool?`	필수	체크 상태
`onChanged`	`ValueChanged<bool?>?`	`null`	상태 변경 콜백
`label`	`String?`	`null`	라벨 텍스트
`tristate`	`bool`	`false`	3단계 상태 허용
`isIndeterminate`	`bool`	`false`	불확정 상태
`enabled`	`bool`	`true`	활성화 여부

변형 (Variants)#

체크박스 그룹#

CouiCheckboxGroup(
  onChanged: handleSelectionChange,
  values: selectedFruits,
  items: [
    CheckboxItem(value: 'apple', label: '사과'),
    CheckboxItem(value: 'banana', label: '바나나'),
    CheckboxItem(value: 'orange', label: '오렌지'),
  ],
)

불확정 상태 (전체 선택)#

CouiCheckbox(
  value: allSelected,
  isIndeterminate: someSelected && !allSelected,
  onChanged: handleSelectAll,
  label: '전체 선택',
)