nili/ui
enfaartr
كل المكوّنات

Checkbox

عرض شامل
٨ تصدير٥ محور تنويع٢٦ خاصيّة٤ ملف
import { Checkbox } from '@nili/ui';

هذه صفحة العرض الشامل الخاصة بالمكتبة، معروضة حيّة. غيّر اللغة أو السمة من الأعلى وسَتتبعك.

الحالات

حقل اختيار حقيقي، فتتصرّف checked وdefaultChecked وdisabled وrequired كما يقصد المتصفّح.

import { Checkbox } from "@nili/ui"

export function Example() {
  return (
    <>
      <Checkbox label={t('states.unchecked')} />
      <Checkbox label={t('states.checked')} defaultChecked />
      <Checkbox label={t('states.indeterminate')} indeterminate />
      <Checkbox label={t('states.invalid')} invalid />
      <Checkbox label={t('states.disabled')} disabled />
      <Checkbox
            label={t('states.disabledChecked')}
            disabled
            defaultChecked
          />
    </>
  )
}

صف التسمية

sublabel نص خافت يلي التسمية في السطر نفسه؛ وbadge هو الفتحة الخلفية؛ وdescription هو السطر الثاني؛ وlinkButton هو الإجراء تحته. الأربعة كلها مفاتيح فيجما، بصيغة خصائص.

(اختياري)
مجاني
(مستحسن)لن نراسلك إلا بشأن ما طلبته.إدارة التفضيلات
import { Checkbox, Badge, LinkButton } from "@nili/ui"

export function Example() {
  return (
    <Checkbox
      defaultChecked
      label="Email notifications"
      sublabel="(recommended)"
      badge={<Badge size="small" color="green" appearance="lighter">Free</Badge>}
      description="We will only email you about things you asked for."
      linkButton={<LinkButton href="#" size="sm">Manage preferences</LinkButton>}
    />
  )
}

موضع التسمية

تسمّيه فيجما «Flip». وهو منطقي، فـstart يسار في الإنجليزية ويمين في الفارسية.

import { Checkbox } from "@nili/ui"

export function Example() {
  return (
    <>
      <Checkbox label={t('position.end')} labelPosition="end" />
      <Checkbox label={t('position.start')} labelPosition="start" />
    </>
  )
}

غير محسوم — تحديد الكل

indeterminate ليست سمة DOM؛ بل يجب إسنادها إلى العنصر، ولهذا يربط هذا المكوّن ref داخليًا دائمًا. واستخدامها المعتاد هو حقل اختيار أبٍ فوق قائمة.

import { Checkbox } from "@nili/ui"

export function Example() {
  const [items, setItems] = useState([true, false, false])
  const all = items.every(Boolean)
  const some = items.some(Boolean) && !all

  return (
    <>
      <Checkbox
        label="Select all"
        checked={all}
        indeterminate={some}
        onChange={(e) => setItems(items.map(() => e.target.checked))}
      />

      {items.map((checked, index) => (
        <Checkbox
          key={index}
          label={`Item ${index + 1}`}
          checked={checked}
          onChange={(e) =>
            setItems((current) =>
              current.map((v, i) => (i === index ? e.target.checked : v)),
            )
          }
        />
      ))}
    </>
  )
}

بلا تسمية

احذف label للحصول على عنصر مجرّد — كعمود تحديد الصفوف في جدول. وامنحه aria-label، إذ لا شيء آخر يسمّيه.

import { Checkbox } from "@nili/ui"

export function Example() {
  return <Checkbox aria-label={t('bare.selectRow')} />
}