مربّع اختيار
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 لتبقى التسمية مقروءة.