البناء · جديد

مربع التفعيل

لاختيار أي عدد من الخيارات، أو لتفعيل إعداد قبل الإرسال. المربع في بداية السطر، والتسمية تبدّله أيضًا.

المعاينة

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

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

npx shadcn@latest add @ritla/checkbox

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

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

<Checkbox name="updates" description="About once a month.">Send me product updates</Checkbox>

checked وindeterminate (بعض الأبناء فقط)، وerror وdisabled وreadOnly. ‏size="lg" هو المربع الكبير للمس بهالته.

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		خاصية Label. بصيغة إيجابية («أرسل لي التحديثات»).
`description`	`ReactNode`		خاصية Show hint support: سطر مساعد.
`checked / defaultChecked`	`boolean`		خاصية Value.
`onCheckedChange`	`(checked: boolean) => void`		عند التبديل.
`indeterminate`	`boolean`	`false`	Value = Indeterminate ‏(`aria-checked="mixed"`).
`error`	`ReactNode \| boolean`		State = Error: الرسالة تحلّ محل الوصف.
`disabled / readOnly / required`	`boolean`		State = Disabled وRead-only.
`size`	`"sm" \| "lg"`	`"sm"`	‏Small (Web) مربع 18px، أو Large (Native) مربع 20px بهالة في مساحة 48px.
`name / value / parent`	`…`		للنماذج ولـ`CheckboxGroup` (‏`parent` لخيار «الكل»).

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

المفتاح	ما يفعله
`Space`	يبدّل المربع.

role="checkbox" مع aria-checked ‏(true وfalse وmixed)، مسمّى بنصه ومرتبط بوصفه.
السطر كله <label>: النقر على النص يبدّله، ومساحة اللمس 48px على الأقل.
الخطأ يضع aria-invalid ويظهر السبب.

الأرقام: لا أرقام في المربع.
الخط العربي: النص label-16 بوزن Medium، والوصف label-12؛ ارتفاع السطر العربي أطول ويبقى المربع في أول سطر.