خانة الاختيار (Checkbox)

يتيح لك مكوّن خانة الاختيار (Checkbox) تحديد خيار أو إلغاء تحديده.

التثبيت

bash

npx @smicolon/fasla-ui@latest add checkbox

قبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.

معاينة

أوافق على الشروط والأحكام

أرسل لي ملخصًا أسبوعيًا بالمكوّنات الجديدة وملاحظات الإصدار عبر البريد الإلكتروني

مع تسمية ووصف

إشعارات البريد الإلكتروني

رسائل العروض

تصلك رسائل عن المنتجات والميزات الجديدة

تنبيهات الأمان

تصلك إشعارات عن تحديثات الأمان

الحالات

حفظ بيانات الدخول

تذكّرني على هذا الجهاز

تحديد كل الملفات

النسخ الاحتياطي التلقائي

أوافق على سياسة الخصوصية

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`checked`	`boolean`	لا يوجد	حالة التحديد، وتُستخدم مع `onChange`.
`indeterminate`	`boolean`	`false`	يعرض شرطة لمجموعة محددة جزئيًا.
`disabled`	`boolean`	`false`	يعطّل الخانة ويُظهرها باهتة.
`error`	`boolean`	`false`	يعلّم الخانة بأنها غير صالحة.
`label`	`string`	لا يوجد	نص التسمية.
`description`	`string`	لا يوجد	سطر ثانوي تحت التسمية.
`name`	`string`	لا يوجد	الاسم الذي يُرسَل مع النموذج.
`value`	`string`	لا يوجد	القيمة التي تُرسَل عند التحديد.
`onChange`	`(event) => void`	لا يوجد	تُستدعى عند تغيير حالة الخانة.
`className`	`string`	لا يوجد	أصناف (class) إضافية للمكوّن.

الاستخدام

خانة اختيار بسيطة

tsx

"use client"

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

export function TermsCheckbox() {
  return <Checkbox name="terms" aria-label="أوافق على الشروط والأحكام" />
}

مع تسمية

tsx

"use client"

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

export function TermsCheckbox() {
  return <Checkbox name="terms" label="أوافق على الشروط والأحكام" />
}

مع وصف

tsx

"use client"

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

export function MarketingCheckbox() {
  return (
    <Checkbox
      name="marketing"
      label="رسائل العروض"
      description="تصلك رسائل عن المنتجات الجديدة"
    />
  )
}

حالة التحديد الجزئي (indeterminate)

tsx

"use client"

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

export function SelectAllCheckbox() {
  return <Checkbox label="تحديد الكل" indeterminate />
}

حالة الخطأ

tsx

"use client"

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

export function RequiredCheckbox() {
  return <Checkbox name="terms" label="حقل مطلوب" required error />
}