خانة الاختيار (Checkbox)

يتيح لك مكوّن خانة الاختيار (Checkbox) تحديد خيار أو إلغاء تحديده.

التثبيت

bash

npx @smicolon/cli add checkbox

قبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.

معاينة

أوافق على الشروط والأحكام

أرسل لي ملخصًا أسبوعيًا بالمكوّنات الجديدة وملاحظات الإصدار عبر البريد الإلكتروني

مع تسمية ووصف

إشعارات البريد الإلكتروني

رسائل العروض

تصلك رسائل عن المنتجات والميزات الجديدة

تنبيهات الأمان

تصلك إشعارات عن تحديثات الأمان

الحالات

حفظ بيانات الدخول

تذكّرني على هذا الجهاز

تحديد كل الملفات

النسخ الاحتياطي التلقائي

أوافق على سياسة الخصوصية

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`checked`	`boolean`	لا يوجد	حالة التحديد، وتُستخدم مع `onChange`.
`indeterminate`	`boolean`	`false`	يعرض شرطة لمجموعة محددة جزئيًا.
`disabled`	`boolean`	`false`	يعطّل الخانة ويُظهرها باهتة.
`error`	`boolean`	`false`	يعلّم الخانة بأنها غير صالحة.
`label`	`string`	لا يوجد	نص التسمية.
`description`	`string`	لا يوجد	سطر ثانوي تحت التسمية.
`name`	`string`	لا يوجد	الاسم الذي يُرسَل مع النموذج.
`value`	`string`	لا يوجد	القيمة التي تُرسَل عند التحديد.
`onChange`	`(event) => void`	لا يوجد	تُستدعى عند تغيير حالة الخانة.
`className`	`string`	لا يوجد	أصناف (class) إضافية للمكوّن.

الاستخدام

tsx

import { Checkbox } from "@/components/ui/checkbox"

// خانة اختيار بسيطة
<Checkbox />

// مع تسمية
<Checkbox label="أوافق على الشروط والأحكام" />

// مع وصف
<Checkbox
  label="رسائل العروض"
  description="تصلك رسائل عن المنتجات الجديدة"
/>

// حالة التحديد الجزئي (indeterminate)
<Checkbox indeterminate />

// حالة الخطأ
<Checkbox label="حقل مطلوب" error />