خانة الاختيار
مكوّن خانة اختيار مع دعم التسمية. يمكن وضع التسمية في موضع البداية أو النهاية أو الأعلى أو الأسفل مع دعم كامل لـ RTL.
Loading demo: checkbox-label-real-world
التثبيت
npx sdaia-ui@latest add checkbox
الاستخدام
import { Checkbox } from "@/components/ui/checkbox"<Checkbox placement="start" />الأمثلة
الحجم
استخدم خاصية `size` لتغيير حجم خانة الاختيار.
Loading demo: checkbox-size
أساسي
خانة اختيار أساسية بلون العلامة التجارية لحالة التحديد.
Loading demo: checkbox-primary
الوصف
استخدم `style="Neutral"` للحصول على حالة تحديد رمادية في السياقات الثانوية.
Loading demo: checkbox-neutral
معطَّل
استخدم خاصية `size` لتغيير حجم خانة الاختيار.
Loading demo: checkbox-disabled
مرجع الواجهة البرمجية
CheckboxProps
خصائص مكوّن Checkbox.
Prop | Type | Default | Required |
|---|---|---|---|
label | ReactNode | — | optional |
placement | "start" | "end" | "top" | "bottom" | "start" | optional |
readOnly | boolean | false | optional |
indeterminate | boolean | false | optional |
size | "sm" | "md" | "lg" | "md" | optional |
variant | "primary" | "neutral" | "primary" | optional |
error | string | — | optional |
helperText | string | — | optional |
disabled | boolean | false | optional |
checked | boolean | — | optional |
defaultChecked | boolean | — | optional |
onCheckedChange | (checked: boolean) => void | — | optional |