البناء · جديد

مجموعة مربعات التفعيل

مربعات تفعيل تحت تسمية واحدة، بنص مساعد أو خطأ مشترك، وخيار «الكل» اختياري يصير جزئيًا حين يُحدَّد بعضها.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/checkbox-group

الاعتماديات التي يضيفها: @base-ui/react

الاستخدام

import { Checkbox } from "@/components/ui/checkbox";
import { CheckboxGroup } from "@/components/ui/checkbox-group";

<CheckboxGroup label="Notify me by" value={value} onValueChange={setValue}>
  <Checkbox value="email">Email</Checkbox>
  <Checkbox value="sms">Text message</Checkbox>
</CheckboxGroup>

أمثلة

الخطأ

error يلوّن كل المربعات ويضع الرسالة تحت المجموعة.

مرجع الخصائص

CheckboxGroup

الخاصية	النوع	الوصف
`label`	`ReactNode`	خاصية Label، كعنوان `legend`.
`value / defaultValue`	`string[]`	قيم المربعات المحددة.
`onValueChange`	`(value: string[]) => void`	عند كل تبديل.
`allValues`	`string[]`	كل القيم، لخيار «الكل» (`<Checkbox parent>`).
`required / helperText / error / disabled`	`…`	كما في حقل الإدخال.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`TabSpace`	Tab بين المربعات، وSpace يبدّل.

ARIA

fieldset مع legend، والنص المساعد أو الخطأ مرتبط بالمجموعة.
خيار «الكل» aria-checked="mixed" حين يُحدَّد بعض الأبناء.

ملاحظات العربية والاتجاه

ينعكس

المربعات في بداية الأسطر (اليمين).

لا ينعكس

علامات الاختيار لا تنعكس.

الأرقام: لا أرقام.
الخط العربي: التسمية label-12 والخيارات label-16 بوزن Medium.

كل المكونات ›