Documentation/Components/Input/Switch

Switch

A switch component provides users the ability to choose between two distinct values. But aesthetically different from a checkbox.

@solara.value_component(bool)
def Switch(
    *,
    label: str = None,
    value: Union[bool, solara.Reactive[bool]] = True,
    on_value: Callable[[bool], None] = None,
    disabled: bool = False,
    color: str = None,
    children: list = [],
    classes: List[str] = [],
    style: Optional[Union[str, Dict[str, str]]] = None,
):

    ...

Basic examples

import solara

show_message = solara.reactive(True)
disable = solara.reactive(False)


@solara.component
def Page():
    with solara.Column():
        with solara.Row():
            solara.Switch(label="Hide Message", value=show_message, disabled=disable.value)
            solara.Switch(label="Disable Message Switch", value=disable)

        if show_message.value:
            solara.Markdown("## Use Switch to show/hide message")

Hide Message

Disable Message Switch

Use Switch to show/hide message

Live output

Arguments

label: The label to display next to the switch.
value: The current value of the switch (True or False).
on_value: A callback that is called when the switch is toggled.
disabled: If True, the switch is disabled and cannot be used.
color: The color of the switch. Can be the name of a theme color variable (i.e. "success"), a color from the Material color palette (i.e. "red darken-3"), or a CSS color (i.e. "#ff991f").
children: A list of child elements to display on the switch.
classes: Additional CSS classes to apply.
style: CSS style to apply.

Switch

Arguments