Switch

Ne zaman kullanılır

Switch, değiştirildiği anda uygulanan bir ayar içindir: bildirimleri açma, karanlık modu açma, bir özelliği etkinleştirme.

Ne zaman kullanılmaz

• Form gönderilince uygulanan bir seçim için: Checkbox kullanın.
• İkiden çok seçenek için: RadioGroup ya da Select 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 { Switch } from '@bigbang/ui';

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

1. Ray: 32 × 18 px (switch-width-md, switch-height-md), tam yuvarlak; size="sm" yoğun satırlar için 24 × 14 px verir. Kapalı ray, sayfaya karşı 3:1 kalsın diye koyu gri kalır.
2. Başparmak: 16 px (switch-thumb-md, sm boyutunda 12 px), gölgesiz; açıkken bitiş kenarına kayar.
3. Etiket: body-md; ray ile birlikte tıklama alanıdır.
4. Açıklama: İsteğe bağlı; etiket metninin hizasında.

Davranış

• Tıklama ve Space anahtarı değiştirir; onCheckedChange hemen çağrılır.
• loading sürerken anahtar odakta kalır, aria-busy bildirir ve değişiklikleri yok sayar.
• Sağdan sola yazımda başparmak ters yönde kayar.
• Formla gizli bir <input> gönderilir; name ona geçer.

Yönergeler

• Etiketi ayarın adı olarak yazın: “Bildirimler”. “Aç” ya da “Kapat” eklemeyin; durumu ray gösterir.
• Kayıt bir saniyeyi aşabiliyorsa loading gösterin; hata olursa durumu geri alın ve nedenini söyleyin.
• Bir formun gönder düğmesine bağlı seçimler için anahtar kullanmayın.

İçerik

• Etiket kısa bir ad öbeğidir; sonunda nokta yoktur.
• Açıklama ayarın sonucunu söyler.

Türkçe	İngilizce
Yükleniyor	Loading
Kaydediliyor	Saving

İlgili bileşenler

• Checkbox: Form gönderilince uygulanan seçim.
• Toggle: Basılı kalan araç çubuğu düğmesi.
• Spinner: Yükleme göstergesi.