مربع اختيار
Checkboxمربع اختيار متاح الوصول في React يدعم التسمية، النص المساعد، حالة الخطأ، الحالة غير المحددة، وثلاثة أحجام. مبني على Radix، مربوط بالنماذج، وجاهز للاتجاه العربي.
يبدل Checkbox حالة خيار واحد. يدعم label، helperText، errorMessage، حالة indeterminate، وثلاثة أحجام.
متى تستخدمه
استخدم Checkbox لخيار يوافق عليه المستخدم ويرسله لاحقاً، مثل إقرار الموافقة أو اختيار عدة عناصر من قائمة. استخدم Switch حين يسري التغيير فوراً. استخدم الحالة غير المحددة لمربع أب يعكس مجموعة محددة جزئياً.
لاختيار واحد من مجموعة، استخدم RadioGroup.
أمثلة
الخصائص
الخصائص التي يعرفها Checkbox. سمات العنصر الأصلي تمر كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "sm" | "md" | "xs" | ||
variant | "primary" | "neutral" | ||
label | react.ReactNode | Visible label, sits beside the box, associated via htmlFor/id. | |
helperText | react.ReactNode | Hint shown below the row. Hidden while an error message is showing. | |
errorMessage | react.ReactNode | Message shown below the row when error is true. | |
error | boolean | Marks the field invalid: sets aria-invalid and error styling. | |
readOnly | boolean | Locks the value: shows state but can't be toggled; stays focusable, sets aria-readonly. | |
checked | CheckedState | ||
defaultChecked | CheckedState | ||
required | boolean | ||
onCheckedChange | (checked: CheckedState) => void | ||
asChild | boolean |
إمكانية الوصول
يعتمد Checkbox على Radix، ويعرض دور مربع الاختيار بثلاث حالات: محدد، فارغ، ومختلط. ترتبط التسمية بالمربع، لذا يبدل النقر عليها حالته. ويعلن قارئ الشاشة النص المساعد ورسالة الخطأ. يبدل مفتاح Space الحالة.
اجعل نص الموافقة قصيراً، وضع الشروط الكاملة خلف Link لتبقى التسمية مقروءة.