Checkbox 체크박스

단독으로 사용하거나 그룹(LhCheckboxGroup)으로 사용합니다. 그룹 내에서 value로 멤버를 식별하며, group의 disabled/size가 하위 항목에 적용됩니다.

체크박스

<template>
  <div class="demo-col" style="gap: 18px">
    <div class="demo-row" style="gap: 20px; flex-wrap: wrap">
      <LhCheckbox v-model="single" label="단독 선택" name="agree" />
      <LhCheckbox v-model="indeterminate" label="전체 선택" indeterminate />
      <LhCheckbox v-model="disabledSingle" label="비활성화" disabled />
    </div>
    <div>
      <LhCheckboxGroup v-model="picked" name="themes">
        <LhCheckbox label="산수" value="shan" />
        <LhCheckbox label="화조" value="hua" />
        <LhCheckbox label="인물" value="ren" disabled />
      </LhCheckboxGroup>
    </div>
    <div>
      <LhCheckboxGroup v-model="picked" disabled>
        <LhCheckbox label="산수" value="shan" />
        <LhCheckbox label="화조" value="hua" />
      </LhCheckboxGroup>
      <p class="demo-note">그룹 전체 disabled</p>
    </div>
    <div class="demo-row" style="gap: 20px; flex-wrap: wrap; align-items: center">
      <LhCheckboxGroup v-model="picked" size="small">
        <LhCheckbox label="산수" value="shan" />
      </LhCheckboxGroup>
      <LhCheckboxGroup v-model="picked" size="large">
        <LhCheckbox label="산수" value="shan" />
      </LhCheckboxGroup>
    </div>
    <p class="demo-note">그룹값: {{ JSON.stringify(picked) }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    single: true,
    indeterminate: true,
    disabledSingle: false,
    picked: ['shan'],
  }),
}
</script>

Checkbox Props

프로퍼티	설명	타입	기본값
v-model	선택 상태 (model: modelValue/input)	boolean	false
value	그룹 내 멤버 값	unknown	—
label	텍스트 (또는 기본 슬롯 사용)	string	—
indeterminate	중간 상태 (원본 컨트롤에 적용)	boolean	false
disabled / size / name	—	—	—

CheckboxGroup Props

프로퍼티	설명	타입	기본값
v-model	선택값 배열	unknown[]	[]
disabled / size / name	하위 항목에 적용	—	—

Events

이벤트	설명	콜백 매개변수
input	v-model 이벤트	—
change	선택 상태 변화 시 발생	(checked)

group의 동명 이벤트가 하위 항목의 변화를 취합합니다.