making custom ToggleButton behave more like a switch

[fokkedj]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui

class ToggleButton(ui.button):

    def __init__(self, *args, **kwargs) -> None:
        self._state = False
        super().__init__(*args, **kwargs)
        self.on('click', self.toggle)

    def toggle(self) -> None:
        """Toggle the button state."""
        self._state = not self._state
        self.update()

    def update(self) -> None:
        with self.props.suspend_updates():
            self.props(f'color={"green" if self._state else "red"}')
        super().update()

ToggleButton('Toggle me')

ui.run()

Description

With the above example code taken from the ui.button docs, how can we make it behave more like proper control?
I want to be able to bind_value() and have it send on_change events. The on_change could of course be called from toggle() but built-in controls al seem to use ValueElement. It's not clear to me how to use it here.

NiceGUI Version

3.6.1

Python Version

3.13.0

Browser

Safari

Operating System

macOS

Additional Context

No response

[falkoschindler]

Hi @fokkedj,

Here is a quick implementation of a custom ToggleButton element:

from nicegui import ui
from nicegui.elements.mixins.value_element import ValueElement
from nicegui.events import Handler, ValueChangeEventArguments

class ToggleButton(ValueElement, ui.button):

    def __init__(self, text: str = '', *,
                 value: bool = False, on_change: Handler[ValueChangeEventArguments] | None = None) -> None:
        super().__init__(text=text, value=value,
                         on_value_change=on_change, on_click=lambda: self.set_value(not self.value))
        self.bind_background_color_from(self, 'value', lambda value: 'green' if value else 'red')

label = ui.label()
toggle_btn = ToggleButton('Toggle me').bind_value_to(label, 'text', lambda value: f'Value: {value}')

To avoid multi-inheritance, you can also use a nested button:

class ToggleButton(ValueElement):

    def __init__(self, text: str = '', *,
                 value: bool = False, on_change: Handler[ValueChangeEventArguments] | None = None) -> None:
        super().__init__(value=value, on_value_change=on_change)
        with self:
            ui.button(text, on_click=lambda: self.set_value(not self.value)) \
                .bind_background_color_from(self, 'value', lambda value: 'green' if value else 'red')

[fokkedj]

Perfect, thank you!