Checkbox

Ne zaman kullanılır

Checkbox, bağımsız bir evet ya da hayır seçimi ve bir listeden birden çok seçim içindir: koşulları kabul etme, bildirim türleri, filtre seçenekleri.

Ne zaman kullanılmaz

• Hemen etki eden bir ayar için: Anahtar (Switch) kullanın; Checkbox değeri form gönderilince uygulanır.
• Birbirini dışlayan seçenekler için: Radyo grubu kullanın.
• Bir araç çubuğu düğmesi için: Toggle kullanın.

Anatomi

Seçenek etiketiSeçenek açıklaması burada yer alır.

AçıkKoyu

Kodu kopyala

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

export default function WithDescription() {
  return <Checkbox label="Seçenek etiketi" description="Seçenek açıklaması burada yer alır." defaultChecked />;
}

1. Kutu: 16 px (checkbox-size), 4 px köşe (checkbox-radius).
2. İşaret: Onay ya da karışık durumda çizgi.
3. Etiket: body-md; kutuyla birlikte tıklama alanıdır.
4. Açıklama: İsteğe bağlı; etiket metninin hizasında.

Davranış

• Tıklama ve Space kutuyu değiştirir; etikete tıklamak da değiştirir.
• indeterminate kutuda çizgi gösterir ve aria-checked="mixed" bildirir.
• parent ile, allValues taşıyan bir CheckboxGroup’taki tüm öğeleri işaretler ya da temizler.
• Formla gizli bir <input type="checkbox"> gönderilir; name ve value ona geçer.

Yönergeler

• Etiketi olumlu bir ifade olarak yazın: “Bildirimleri e-postayla al”.
• İlişkili seçenekleri CheckboxGroup içinde bir başlıkla toplayın.
• Varsayılan olarak işaretli kutuyu yalnızca kullanıcının yararına olduğunda kullanın.

İçerik

• Etiket bir cümle parçasıdır; sonunda nokta yoktur.
• Açıklama seçimin sonucunu söyler.

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

İlgili bileşenler

• CheckboxGroup: Onay kutularını bir başlık altında toplar.
• Toggle: Basılı kalan araç çubuğu düğmesi.
• Label: Ayrı etiket gerektiğinde.