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')} />
}