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 同名事件彙總子項變化。