---
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/pl/components/swap
---

# Swap Component

Zamiana komponentów umożliwia przełączanie pomiędzy dwoma stanami zawartości z płynnymi animacjami w odpowiedzi na interakcję użytkownika. Zbudowane z semantycznych przejść HTML i CSS, zamiany umożliwiają eleganckie zmiany stanu bez JavaScript. System wymiany Frutjam obsługuje wiele stylów animacji — idealny do przełączania motywów, przełączania trybów, stanów ładowania i interaktywnych ilustracji.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa       | Typ     | Opis                                                       |
| ----------- | ------- | ---------------------------------------------------------- |
| swap        | Opierać | Dwustanowe opakowanie przełączające sterowane polem wyboru |
| swap-rotate | Styl    | Obraca się pomiędzy stanami                                |
| swap-flip   | Styl    | Przechodzi między stanami z efektem 3D                     |

## Podstawowe użycie

Utwórz prostą zamianę za pomocą emoji lub treści tekstowej, korzystając z pola wyboru, aby przełączać stany.

## Zamień animacje

Zastosuj różne style animacji do przejść wizualnych: zanikanie (domyślne), obracanie i odwracanie.

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

## Zamień na ikony SVG

Użyj ikon SVG do zmian stanu wizualnego z płynnymi animacjami.

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

## Zamień jako przycisk

Połącz funkcję zamiany ze stylizacją komponentów przycisków, aby uzyskać interaktywne przełączniki.

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

## Zamień jako odznakę

Twórz kompaktowe plakietki przełączające do przełączania statusu lub kategorii.

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

## Połączone warianty wymiany

Mieszaj różne style animacji i typy treści, aby uzyskać złożone scenariusze przełączania.

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