---
title: "Toggle"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Toggle using native HTML inputs. Accessible on/off switch with custom colors, sizes, and label support for settings and preference forms."
url: https://frutjam.com/tr/components/toggle
---

# Toggle Component

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

## Boyutları Değiştir

```html
<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

```html
<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ş

```html
<input type="checkbox" class="toggle" disabled>
<input type="checkbox" class="toggle" disabled checked>
```

## Etiketle Değiştir

```html
<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

```html
<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>
```