---
title: "Swap"
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: "JS-free Tailwind CSS Swap with fade, rotate, and flip animations. Toggle between content states for theme switches, icon transitions, and loading states."
url: https://frutjam.com/id/components/swap
---

# Swap Component

Tukar komponen untuk beralih antara dua status konten dengan animasi halus sebagai respons terhadap interaksi pengguna. Dibangun dengan transisi semantik HTML dan CSS, swap memungkinkan perubahan status yang elegan tanpa JavaScript. Sistem pertukaran Frutjam mendukung berbagai gaya animasi—ideal untuk peralihan tema, peralihan mode, status pemuatan, dan ilustrasi interaktif.

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                                                        |
| ----------- | ----- | ----------------------------------------------------------------- |
| swap        | Basis | Pembungkus sakelar dua keadaan yang digerakkan oleh kotak centang |
| swap-rotate | Gaya  | Berputar antar negara bagian                                      |
| swap-flip   | Gaya  | Beralih antar negara bagian dengan efek 3D                        |

## Penggunaan Dasar

Buat pertukaran sederhana dengan emoji atau konten teks menggunakan kotak centang untuk beralih status.

## Tukar Animasi

Terapkan gaya animasi berbeda untuk transisi visual: memudar (default), memutar, dan membalik.

```html
<label class="swap">
  <input type="checkbox" />
  <div class="swap-on">Online</div>
  <div class="swap-off">Offline</div>
</label>

<label class="swap swap-rotate">
  <input type="checkbox" />
  <div class="swap-on">➕</div>
  <div class="swap-off">✖️</div>
</label>

<label class="swap swap-flip">
  <input type="checkbox" />
  <div class="swap-on">Yes</div>
  <div class="swap-off">No</div>
</label>
```

## Tukar dengan Ikon SVG

Gunakan ikon SVG untuk perubahan keadaan visual dengan animasi yang halus.

```html
<label class="swap swap-rotate">
  <input type="checkbox" />
  <svg class="swap-on" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <circle cx="12" cy="12" r="1"/><path d="M12 2v6m0 4v6M4.22 4.22l4.24 4.24m2.98 2.98l4.24 4.24M2 12h6m4 0h6M4.22 19.78l4.24-4.24m2.98-2.98l4.24-4.24"/>
  </svg>
  <svg class="swap-off" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
  </svg>
</label>
```

## Tukar sebagai Tombol

Gabungkan fungsionalitas pertukaran dengan gaya komponen tombol untuk peralihan interaktif.

```html
<label class="btn btn-primary swap">
  <input type="checkbox" />
  <div class="swap-on">Light Mode</div>
  <div class="swap-off">Dark Mode</div>
</label>

<label class="btn btn-secondary swap swap-flip">
  <input type="checkbox" />
  <div class="swap-on">Connected</div>
  <div class="swap-off">Disconnected</div>
</label>

<label class="btn btn-outline swap swap-rotate">
  <input type="checkbox" />
  <div class="swap-on">Expanded</div>
  <div class="swap-off">Collapsed</div>
</label>
```

## Tukar sebagai Lencana

Buat lencana pengalih ringkas untuk peralihan status atau kategori.

```html
<label class="badge badge-primary swap cursor-pointer">
  <input type="checkbox" />
  <div class="swap-on">Active</div>
  <div class="swap-off">Inactive</div>
</label>

<label class="badge badge-success swap cursor-pointer swap-flip">
  <input type="checkbox" />
  <div class="swap-on">✓ Verified</div>
  <div class="swap-off">Pending</div>
</label>
```

## Varian Swap Gabungan

Campurkan gaya animasi dan tipe konten yang berbeda untuk skenario peralihan yang kompleks.

```html
<label class="swap swap-flip">
  <input type="checkbox" />
  <div class="swap-on">→</div>
  <div class="swap-off">←</div>
</label>

<label class="swap swap-rotate">
  <input type="checkbox" />
  <div class="swap-on">Saving...</div>
  <div class="swap-off">Save</div>
</label>

<label class="btn btn-ghost btn-sm swap swap-flip">
  <input type="checkbox" />
  <div class="swap-on">Show Less</div>
  <div class="swap-off">Show More</div>
</label>
```