Toggle Component
CSS-only Tailwind CSS toggle switch with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Geçiş bileşenleri, kullanıcıların özellikleri veya ayarları açıp kapatmasına olanak tanıyan ikili anahtarlardır. Yerel HTML onay kutusu girişleriyle oluşturulmuş ve Tailwind CSS animasyonlarıyla geliştirilmiş geçişler, boole durumlarını kontrol etmek için sezgisel bir yol sağlar. Frutjam geçiş sistemi birden fazla rengi, boyutu ve devre dışı bırakma durumunu destekler; ayar panelleri, özellik bayrakları ve tercih kontrolleri için mükemmeldir.
Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.
| Sınıf | Tip | Tanım |
|---|---|---|
| toggle | Temel | Animasyonlu açma/kapama düğmesi girişi |
| toggle-xs | Boyut | Ekstra küçük |
| toggle-sm | Boyut | Küçük |
| toggle-md | Boyut | Orta (varsayılan) |
| toggle-lg | Boyut | Büyük |
| toggle-xl | Boyut | Ekstra büyük |
| toggle-primary | Renk | Birincil tema rengi |
| toggle-secondary | Renk | İkincil tema rengi |
| toggle-accent | Renk | Vurgu teması rengi |
| toggle-neutral | Renk | Nötr tema rengi |
| toggle-info | Renk | Bilgi anlamsal rengi |
| toggle-success | Renk | Başarı anlamsal rengi |
| toggle-warning | Renk | Uyarı anlamsal rengi |
| toggle-error | Renk | Hata anlamsal rengi |
Temel Kullanım
1 2 | <input type="checkbox" class="toggle"> <input type="checkbox" class="toggle" checked> |
1 2 | <input type="checkbox" className="toggle"> <input type="checkbox" className="toggle" checked> |
Boyutları Değiştir
1 2 3 4 5 | <input type="checkbox" class="toggle toggle-xs"> <input type="checkbox" class="toggle toggle-sm"> <input type="checkbox" class="toggle toggle-md"> <input type="checkbox" class="toggle toggle-lg"> <input type="checkbox" class="toggle toggle-xl"> |
Renkleri Değiştir
1 2 3 4 5 6 7 8 | <input type="checkbox" class="toggle" checked> <input type="checkbox" class="toggle toggle-primary" checked> <input type="checkbox" class="toggle toggle-secondary" checked> <input type="checkbox" class="toggle toggle-accent" checked> <input type="checkbox" class="toggle toggle-info" checked> <input type="checkbox" class="toggle toggle-success" checked> <input type="checkbox" class="toggle toggle-warning" checked> <input type="checkbox" class="toggle toggle-error" checked> |
Devre Dışı Geçiş
1 2 | <input type="checkbox" class="toggle" disabled> <input type="checkbox" class="toggle" disabled checked> |
Etiketle Değiştir
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-primary" checked> <span>Enable notifications</span> </label> <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-success" checked> <span>Dark mode</span> </label> <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-warning"> <span>Analytics</span> </label> |
Durumları Değiştir
Off
On
Disabled
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="flex gap-4 items-center"> <div> <p class="text-sm font-medium mb-2">Off</p> <input type="checkbox" class="toggle toggle-primary"> </div> <div> <p class="text-sm font-medium mb-2">On</p> <input type="checkbox" class="toggle toggle-primary" checked> </div> <div> <p class="text-sm font-medium mb-2">Disabled</p> <input type="checkbox" class="toggle toggle-primary" disabled> </div> </div> |