Swap

Label(
    # <!-- this hidden checkbox controls the state -->
    Input(type='checkbox'),
    Div('ON', cls='swap-on'),
    Div('OFF', cls='swap-off'),
    cls='swap'
    )

Label(
# <!-- this hidden checkbox controls the state -->
Input(type='checkbox'),
# <!-- volume on icon -->
Icon.volume_on(cls="swap-on"),
# <!-- volume off icon -->
Icon.volume_off(cls="swap-off"),
cls='swap'
)

Label(
    # <!-- this hidden checkbox controls the state -->
    Input(type='checkbox'),
    # <!-- sun icon -->
    Icon.sun(cls="swap-on"),
    # <!-- moon icon -->
    Icon.moon(cls="swap-off"),
    cls='swap swap-rotate'
)

Label(
    # <!-- this hidden checkbox controls the state -->
    Input(type='checkbox'),
    # <!-- hamburger icon -->
    Icon.hamburger(cls="swap-off"),
    # <!-- close icon -->
    Icon.close(cls="swap-on"),
    cls='btn btn-circle swap swap-rotate'
)

Label(
    Input(type='checkbox'),
    Div('😈', cls='swap-on'),
    Div('😇', cls='swap-off'),
    cls='swap swap-flip text-9xl'
)

Div(
    Label(
        Div('🥵', cls='swap-on'),
        Div('🥶', cls='swap-off'),
        cls='swap text-6xl js-swap-demo'
    ),
    Label(
        Div('🥳', cls='swap-on'),
        Div('😭', cls='swap-off'),
        cls='swap text-6xl js-swap-demo'
    ),
    Script("""
        // Auto toggle every second for all demo elements
        const elements = document.querySelectorAll('.js-swap-demo');
        setInterval(() => {
            elements.forEach(el => {
                el.classList.toggle('swap-active');
            });
        }, 1000);
    """)
)