CheckboxGroup

Ne zaman kullanılır

CheckboxGroup, aynı soruya ait birden çok seçimi bir arada sunmak içindir: bildirim kanalları, ilgi alanları, filtre değerleri.

Ne zaman kullanılmaz

• Tek seçim için: Radyo grubu ya da Select kullanın.
• Tek bağımsız onay için: Yalnız bir Checkbox yeterlidir.
• Uzun listeler için: Yaklaşık 10 seçeneği aşan listeler arama ister.

Anatomi

Grup etiketi

Birden çok seçenek seçebilirsiniz.

Birinci seçenek

İkinci seçenek

Üçüncü seçenek

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  return (
    <CheckboxGroup label="Grup etiketi" description="Birden çok seçenek seçebilirsiniz." defaultValue={['one']}>
      <Checkbox value="one" label="Birinci seçenek" />
      <Checkbox value="two" label="İkinci seçenek" />
      <Checkbox value="three" label="Üçüncü seçenek" />
    </CheckboxGroup>
  );
}

1. Başlık: <legend>; label-md, gerektiğinde zorunluluk işareti.
2. Yardım metni: description.
3. Öğeler: Her biri value taşıyan Checkbox bileşenleri.
4. Hata: error; öğelerin altında.

Davranış

• Grup, işaretli öğelerin değerlerini bir dizi olarak tutar.
• allValues ile bir parent Checkbox tümünü işaretler ya da temizler.
• Başlık ve yardım metni gruba, hata mesajı yardım metninden sonra bağlanır.
• disabled tüm öğeleri kapatır.

Yönergeler

• Başlığı soru ya da konu olarak yazın: “Bildirim kanalları”.
• Seçenekleri anlamlı bir sırayla verin.
• Zorunlu bir grupta en az bir seçim isteyin ve bunu hata metninde söyleyin.

İçerik

• Başlık kısa bir ad öbeği ya da sorudur.
• Öğe etiketleri aynı dilbilgisel yapıdadır.

Türkçe	İngilizce
Tümü	All
En az bir seçenek seçin.	Choose at least one option.

İlgili bileşenler

• Checkbox: Grubun öğesi.
• Select: Kısa listeden tek seçim.
• ToggleGroup: Hemen etki eden seçenekler.