خانة الاختيار
مربع اختيار بحجم 16 بكسل مبني على React Aria. تعرض حالتا التحديد وعدم التحديد الجزئي التدرج الأساسي مع الإبراز الداخلي من Figma، ويرسم العلامة نفسه بحركة رسم.
التثبيت
يمكنك إضافة مكوّن خانة الاختيار هذا باستخدام CLI الخاص بنا أو يدويًا:
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.
npx boardui@latest add checkboxهل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
الأحجام
حجمان عبر الحجم الخاصية - md (16px، الافتراضي) و sm (14px، يستخدم في الجداول الكثيفة).
<Checkbox size="md" defaultSelected /> {/* 16px (default) */}<Checkbox size="sm" defaultSelected /> {/* 14px */}التسميات والتحكم
تمرير children لتسمية - يربطها React Aria بالحقل تلقائياً. استخدم isSelected + onChange للحالة المتحكَّم بها، أو defaultSelected للوضع غير المتحكم به.
{/* children become the label - clicking it toggles the box */}<Checkbox defaultSelected>Remember me</Checkbox><Checkbox>Send me product updates</Checkbox>
{/* Controlled */}<Checkbox isSelected={checked} onChange={setChecked}>Terms</Checkbox>بطاقة
بطاقة قابلة للتحديد بعنوان ووصف اختياري - تبدّل البطاقة بأكملها خانة الاختيار وتُظهر خلفية عند التمرير. إنها عنصر سجل منفصل: npx boardui add checkbox-card.
import { CheckboxCard } from "@/components/base/checkbox/checkbox-card";
<CheckboxCard title="Item title" description="This is for you to check." /><CheckboxCard defaultSelected title="Item title" description="This is for you to check." /><CheckboxCard title="No description" />