Anlık efekti olan iki durumlu kontrol — toggle ettiğin anda yürürlüğe girer, kaydet butonu beklemez. Üç boyut (sm/md/lg), açık/kapalı/disabled durumları, focus halkası ve hit-target kuralları. Form gönderiminde işlenmesi gereken seçim için Checkbox'a bak.
01 · Boyut & durum matrisi
offondisabledsm · 28×16md · 36×20lg · 44×24
02 · Ayarlar paneli kullanımı
Label sola, switch sağa hizalı; iki satırlı label desteklenir
WhatsApp bildirimleri
Yeni sipariş geldiğinde sesli uyarı çalar
Otomatik kurye ataması
Sipariş "Hazır" olunca yakındaki kuryeye atar
Müşteri yorumlarını otomatik yayımla
5 yıldızlı yorumlar onay bekletmeden anasayfaya çıkar
Sadakat puanı kazandır Yakında
Her siparişten %2 puan — Pro plan gerekli
03 · Inline kullanım
Tablo satırı, kart başlığı içinde
Kadıköy · Bağdat şubesi
Bu şubeyi siparişe açık tutar
Açık
Beyoğlu · Cihangir şubesi
Yoğun saat dışı — manuel kapalı
Kapalı
Kurallar
· Switch ↔ Checkbox ayrımı: Switch anlık ayar (toggle = aktive); Checkbox form gönderiminde işlenir. Karar emin değilse "kullanıcı kaydet basacak mı?" diye sor — evet ise checkbox.
· Hit alanı: switch + label tek <label> içinde — minimum 32×32 tıklanabilir alan.
· Aktif renk her zaman --nb-primary; status renkleri (warning/danger) kullanılmaz — switch evet/hayır'dır, durum bildirmez.
· Açık/kapalı etiketi switch içinde yer almaz — gerekirse yanına metin koy ("Açık" / "Kapalı").
· Disabled: opacity .5 + cursor: not-allowed + parent'a pointer-events: none.
· Animasyon: track 150ms cubic-bezier; thumb aynı; spring/bounce kullanılmaz.
· Erişilebilirlik: role="switch" + aria-checked. Klavye Space toggles. Focus halkası track'e değil dış kutuya çizilir.