Sakelar pengalih Tailwind CSS khusus CSS dengan varian warna primer, sekunder, aksen, dan semantik. Ukuran XS-XL. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Komponen sakelar adalah sakelar biner yang memungkinkan pengguna mengaktifkan dan menonaktifkan fitur atau pengaturan. Dibuat dengan input kotak centang HTML asli dan disempurnakan dengan animasi Tailwind CSS, tombol alih memberikan cara intuitif untuk mengontrol status boolean. Sistem sakelar Frutjam mendukung berbagai warna, ukuran, dan status nonaktif—sempurna untuk panel pengaturan, tanda fitur, dan kontrol preferensi.
Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
| Kelas | Jenis | Keterangan |
|---|---|---|
| toggle | Basis | Animated on/off switch input |
| toggle-xs | Ukuran | Sangat kecil |
| toggle-sm | Ukuran | Kecil |
| toggle-md | Ukuran | Sedang (standar) |
| toggle-lg | Ukuran | Besar |
| toggle-xl | Ukuran | Ekstra besar |
| toggle-primary | Warna | Warna tema utama |
| toggle-secondary | Warna | Warna tema sekunder |
| toggle-accent | Warna | Warna tema aksen |
| toggle-neutral | Warna | Warna tema netral |
| toggle-info | Warna | Info warna semantik |
| toggle-success | Warna | Warna semantik sukses |
| toggle-warning | Warna | Warna semantik peringatan |
| toggle-error | Warna | Kesalahan warna semantik |
Penggunaan Dasar
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> |
Toggle Sizes
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"> |
Toggle Colors
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> |
Disabled Toggle
1 2 | <input type="checkbox" class="toggle" disabled> <input type="checkbox" class="toggle" disabled checked> |
Toggle with Label
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> |
Toggle States
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> |
Using Claude Code, Cursor, or another AI editor?
Cherry MCP memberi editor AI Anda nama dan struktur kelas Beralih yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.