메인 콘텐츠로 건너뛰기

Checkbox 체크박스

여러 후보 항목 중에서 다중 선택할 때 사용하며, 단독 사용과 LhCheckboxGroup 조합 사용을 지원합니다.

기본 사용법​

단독과 조합

선택됨: ink

import { useState } from 'react'
import { LhCheckbox, LhCheckboxGroup } from '@lh-ui/react'

export default function Demo() {
  const [checked, setChecked] = useState(false)
  const [group, setGroup] = useState<string[]>(['ink'])

  return (
    <>
      <LhCheckbox checked={checked} onChange={(val) => setChecked(val)}>
        단독 체크박스
      </LhCheckbox>

      <LhCheckboxGroup value={group} onChange={(val) => setGroup(val as string[])}>
        <LhCheckbox value="ink">수묵</LhCheckbox>
        <LhCheckbox value="danqing">단청</LhCheckbox>
        <LhCheckbox value="blank">여백</LhCheckbox>
      </LhCheckboxGroup>
    </>
  )
}

Checkbox Props​

프로퍼티설명타입선택 가능한 값기본값
value옵션 값 (Group 내에서 적용)unknown——
checked제어 선택 상태 (단독 사용 시)boolean——
defaultChecked비제어 기본 선택boolean—false
label표시 문구string——
disabled비활성화boolean—false
indeterminate중간 상태 (시각에만 영향, 값을 만들지 않음)boolean—false
size크기'large' | 'middle' | 'small'—ConfigProvider 따름
name기본 name 속성 (Group이 전달)string——
sx빠른 레이아웃 프로퍼티SxProps——

Checkbox 이벤트​

이벤트설명콜백 시그니처Vue 대응
onChange선택 상태 변화 (2개 인수)(checked: boolean, event: ChangeEvent) => void@change

CheckboxGroup Props​

프로퍼티설명타입기본값
value제어 선택 값 배열unknown[]—
defaultValue비제어 기본값unknown[][]
disabled모든 자식 항목 비활성화booleanfalse
size자식 항목 크기'large' | 'middle' | 'small'ConfigProvider 따름
name자식 항목에 전달할 기본 namestring—

CheckboxGroup 이벤트​

이벤트설명콜백 시그니처Vue 대응
onChange선택 값 배열 변화(value: unknown[]) => void@change
중간 선택 상태

indeterminate는 「전체 선택」 중간 상태에 자주 사용됩니다. 시각적으로는 가로줄이지만 checked에 영향을 주지 않습니다. 컴포넌트는 useEffect에서 기본 input.indeterminate에 동기화합니다.

스타일​

import '@lh-ui/react/style/checkbox'