مربع اختيار Checkbox

يُستخدم للتحديد المنفرد أو ضمن مجموعة (LhCheckboxGroup). يُعرَّف كل عضو داخل المجموعة عبر value، وتسري 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">المجموعة كلها معطّلة</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)

تُلخّص المجموعة تغيّرات العناصر الأبناء ضمن الأحداث التي تحمل الاسم نفسه.