Swap

Swap allows you to toggle the visibility of two elements using a checkbox or a class name.

Class name		 Type
swap Component Container element
swap-on Component The child element that should be visible when checkbox is checked or when swap is active
swap-off Component The child element that should be visible when checkbox is not checked or when swap is not active
swap-indeterminate Component The child element that should be visible when checkbox is indeterminate
swap-active
Modifier
Activates the swap (no need for checkbox)
swap-rotate
Modifier
Adds rotate effect to swap
swap-flip
Modifier
Adds flip effect to swap
# Swap text
# Swap volume icons
# Swap icons with rotate effect
# Hamburger button
# Swap icons with flip effect
# Activate using class name instead of checkbox
Instead of working with click, it shows swap-on item if you add swap-active class name. You can add or remove swap-active class using JS
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective

Sponsors

Never google
a command again

Become a sponsor