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

OFF

# Swap volume icons

# Swap icons with rotate effect

# Hamburger button

# Swap icons with flip effect

😈

😇

# Activate using class name instead of checkbox

🥵

🥶

🥳

😭

Do you have a question? ask the community

Do you like daisyUI? tweet about it!

Support daisyUI's development: Open Collective