nili/ui
enfaartr
Tüm bileşenler

Checkbox

Genel görünüm
8 export5 varyant ekseni26 prop4 dosya
import { Checkbox } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Durumlar

Gerçek bir onay kutusu girdisi; bu yüzden checked, defaultChecked, disabled ve required tarayıcının istediği gibi davranır.

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

Etiket satırı

sublabel etiketten hemen sonra gelen soluk metindir; badge sondaki yuva; description ikinci satır; linkButton altındaki eylem. Dördü de Figma’daki anahtarların prop hâlidir.

(isteğe bağlı)
Ücretsiz
(önerilir)Size yalnızca istediğiniz konularda e‑posta göndeririz.Tercihleri yönet
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>}
    />
  )
}

Etiket konumu

Figma buna “Flip” diyor. Mantıksaldır: start, İngilizcede sol, Farsçada sağdır.

import { Checkbox } from "@nili/ui"

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

Belirsiz — tümünü seç

indeterminate bir DOM özniteliği değildir; öğeye atanması gerekir, bu yüzden bu bileşen içeride her zaman bir ref bağlar. Olağan kullanımı bir listenin üstündeki ana onay kutusudur.

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

Etiketsiz

Çıplak bir denetim için label vermeyin — örneğin bir tablonun satır seçme sütunu. Ona bir aria-label verin; onu adlandıracak başka bir şey yok.

import { Checkbox } from "@nili/ui"

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