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 の同名イベントが子項目の変化を集約します。