Checkbox

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { Checkbox } from '@bigbang/ui';

Kaynak

Checkbox.tsx

Storybook

Checkbox · Playground

Checkbox, @bigbang/ui paketindedir.

import { Checkbox } from '@bigbang/ui';

<Checkbox label="Seçenek etiketi" checked={checked} onCheckedChange={setChecked} />;

Özellikler

labelZorunlu

Açıklama

Kutunun yanındaki görünür metin; onay kutusunu adlandırır, tıklamak kutuyu değiştirir.

Tür

ReactNode

description

Açıklama

Etiketin altındaki yardım metni; aria-describedby ile bağlanır.

Tür

ReactNode

checked

Açıklama

Kontrollü işaretli durum. onCheckedChange ile birlikte verin.

Tür

boolean

defaultChecked

Açıklama

Kontrolsüz kullanımda ilk çizimdeki işaretli durum.

Tür

boolean

Varsayılan

false

onCheckedChange

Açıklama

Kullanıcı kutuyu değiştirince yeni durumla çağrılır.

Tür

(checked: boolean) => void

indeterminate

Açıklama

Çizgi gösterir ve aria-checked="mixed" bildirir; alt öğeleri kısmen işaretli bir üst öğe içindir.

Tür

boolean

Varsayılan

false

invalid

Açıklama

Kutuyu geçersiz işaretler; örneğin CheckboxGroup üzerindeki hata metniyle birlikte kullanın.

Tür

boolean

Varsayılan

false

required

Açıklama

Form gönderilmeden önce kutu işaretlenmelidir.

Tür

boolean

Varsayılan

false

disabled

Açıklama

Etkileşimi kapatır; kutuyu ve etiketini soluklaştırır.

Tür

boolean

Varsayılan

false

name

Açıklama

Form gönderiminde kullanılan alan adı.

Tür

string

value

Açıklama

CheckboxGroup içindeki öğenin değeri ve formla gönderilen değer.

Tür

string

parent

Açıklama

allValues taşıyan bir CheckboxGroup'un üst öğesi yapar: tüm öğeleri işaretler ya da temizler, bir kısmı işaretliyken karışık durum gösterir.

Tür

boolean

Varsayılan

false

className

Açıklama

Yalnızca yerleşim için: dış boşluk ve konum.

Tür

string

Veri öznitelikleri

• data-component="checkbox": kök öğe üzerinde.
• data-part: box, indicator, label, description.
• data-checked, data-unchecked, data-indeterminate, data-disabled: kutu üzerinde, Base UI’dan.