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>

FlyonUI

Tailwind CSS Swap

Variants

Swap text

Swap volume icons

Swap icons with rotate effect

Hamburger button

Emotes with flip effect

With JavaScript

Using class names

Illustrations

RTL swap

Play pause button

On this page

Swap