Swap

DaisyUI

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

Text Swap
Rotate Effect

Adds rotate animation to swap.

Flip Effect

Adds flip animation to swap.

Active State

Use swap-active class instead of checkbox.

Code Example
use rsxui::components::{Swap, SwapOn, SwapOff};
use rsx_macros::rsx;
let html = rsx! {
    <Swap rotate={true}>
        <input type="checkbox" />
        <SwapOn>"😈"</SwapOn>
        <SwapOff>"😇"</SwapOff>
    </Swap>
};