Tailwind CSS Swap

Class Name	Type	Description
swap	Component	Base class for swap component.
swap-on	Component	It targets a child element that should be visible when the checkbox is checked or when the swap component is active.
swap-off	Component	It targets a child element that should not be visible when the checkbox is not checked or when the swap component is inactive.
swap-indeterminate	Component	It targets a child element that should be visible when checkbox is indeterminate.
swap-js	Component	It targets the swap component working with JS instead of checkbox.
swap-flip	Modifier	Adds flip effect to swap content.
swap-rotate	Modifier	Adds rotate effect to swap content.
swap-active	Modifier	Activates the swap (no need for checkbox).

Variants

Swap text

Utilize the swap component class along with an empty checkbox input and child component classes swap-off and swap-on to create a swap component.

Swap volume icons

Use below given example for volume/mute swap component.

Swap icons with rotate effect

Apply the modifier class swap-rotate to enable a rotate effect for the swap component.

Hamburger button

Use below given example for hamburger button.

Emotes with flip effect

Apply the modifier class swap-flip to enable a flip effect for the swap component.

Utilize the component class swap-js to designate a specific swap component for JavaScript functionality, allowing the swap to function without a checkbox. Toggling the modifier class swap-active on a click event of the swap component facilitates this behavior.

<label class="swap swap-js text-6xl">
  <span class="swap-on">🥵</span>
  <span class="swap-off">🥶</span>
</label>
<label class="swap swap-js text-6xl">
  <span class="swap-on">🥳</span>
  <span class="swap-off">😭</span>
</label>

<script>
// Swap elements JS code below
const swapElements = document.querySelectorAll('.swap-js')

// Function to handle click event on swap elements
function handleClick(event) {
  // Toggle the 'swap-active' class on the clicked swap element
  event.currentTarget.classList.toggle('swap-active')

  // Get the 'swap-on' and 'swap-off' elements within the current swap element
  const swapOn = event.currentTarget.querySelector('.swap-on')
  const swapOff = event.currentTarget.querySelector('.swap-off')

  // Determine the value based on the presence of 'swap-active' class
  const value = event.currentTarget.classList.contains('swap-active') ? swapOn.innerHTML : swapOff.innerHTML

  // Log the value to the console
  console.log(`Value: ${value}`)
}

// Iterate through each swap element and add click event listener
swapElements.forEach(swapElement => {
  swapElement.addEventListener('click', handleClick)
})

</script>

Illustrations

RTL swap

Use below given example for RTL swap.

Play pause button

Use below given example for play-pause button.

<label class="btn btn-circle swap swap-rotate">
  <input type="checkbox" />
  <span class="icon-[tabler--player-play] swap-off"></span>
  <span class="icon-[tabler--player-pause] swap-on"></span>
</label>

FlyonUI