Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Forms

/

Switch

A toggle switch alternative to the checkbox.

Sync Settings

rx.flex(
    rx.switch(default_checked=True),
    rx.text("Sync Settings"),
    spacing="2",
)

Here we set the default_checked prop to be True which sets the state of the switch when it is initially rendered.

The name of the switch is needed to submit with its owning form as part of a name/value pair.

When the required prop is True, it indicates that the user must check the switch before the owning form can be submitted.

The value prop is only used for form submission, use the checked prop to control state of the switch.

Results

{}

class FormSwitchState(rx.State):
    form_data: dict = {}

    def handle_submit(self, form_data: dict):
        """Handle the form submit."""
        self.form_data = form_data


def form_switch():
    return rx.vstack(
        rx.form.root(
            rx.vstack(
                rx.switch(name="s1"),
                rx.switch(name="s2"),
                rx.switch(name="s3", required=True),
                rx.button("Submit", type="submit"),
                width="100%",
            ),
            on_submit=FormSwitchState.handle_submit,
            reset_on_submit=True,
            width="100%",
        ),
        rx.divider(),
        rx.heading("Results"),
        rx.text(FormSwitchState.form_data.to_string()),
        width="100%",
    )

The checked prop is used to control the state of the switch.

The event on_change is called when the state of the switch changes, when the change_checked event handler is called.

The disabled prop when True, prevents the user from interacting with the switch.

In our example below, even though the third switch is disabled we are still able to change whether it is checked or not using the checked prop.

class SwitchState2(rx.State):
    checked = True

    def change_checked(self, checked: bool):
        """Change the switch checked var."""
        self.checked = checked


def switch_example2():
    return rx.hstack(
        rx.switch(
            checked=SwitchState2.checked,
            on_change=SwitchState2.change_checked,
        ),
        rx.switch(
            checked=~SwitchState2.checked,
            on_change=lambda v: SwitchState2.change_checked(
                ~v
            ),
        ),
        rx.switch(
            checked=SwitchState2.checked,
            on_change=SwitchState2.change_checked,
            disabled=True,
        ),
    )

In this example we use the ~ operator, which is used to invert a var. To learn more check out var operators.

classic

surface

soft

Accent

Gray

Disabled

Results

{}

class FormSwitchState2(rx.State):
    form_data: dict = {}

    cookie_types: dict[str, bool] = {}

    def handle_submit(self, form_data: dict):
        """Handle the form submit."""
        self.form_data = form_data

    def update_cookies(
        self, cookie_type: str, enabled: bool
    ):
        self.cookie_types[cookie_type] = enabled


def form_switch2():
    return rx.vstack(
        rx.dialog.root(
            rx.dialog.trigger(
                rx.button(
                    "View Cookie Settings",
                    size="4",
                    variant="outline",
                )
            ),
            rx.dialog.content(
                rx.form.root(
                    rx.dialog.title(
                        "Your Cookie Preferences"
                    ),
                    rx.dialog.description(
                        "Change your cookie preferences.",
                        size="2",
                        margin_bottom="16px",
                    ),
                    rx.flex(
                        rx.text(
                            rx.flex(
                                "Required",
                                rx.switch(
                                    default_checked=True,
                                    disabled=True,
                                    name="required",
                                ),
                                spacing="2",
                                justify="between",
                            ),
                            as_="div",
                            size="2",
                            margin_bottom="4px",
                            weight="bold",
                        ),
                        *[
                            rx.flex(
                                rx.text(
                                    cookie_type.capitalize(),
                                    as_="div",
                                    size="2",
                                    margin_bottom="4px",
                                    weight="bold",
                                ),
                                rx.text(
                                    rx.flex(
                                        rx.cond(
                                            FormSwitchState2.cookie_types[
                                                cookie_type
                                            ],
                                            "Enabled",
                                            "Disabled",
                                        ),
                                        rx.switch(
                                            name=cookie_type,
                                            checked=FormSwitchState2.cookie_types[
                                                cookie_type
                                            ],
                                            on_change=lambda checked: FormSwitchState2.update_cookies(
                                                cookie_type,
                                                checked,
                                            ),
                                        ),
                                        spacing="2",
                                    ),
                                    as_="div",
                                    size="2",
                                    margin_bottom="4px",
                                    weight="bold",
                                ),
                                direction="row",
                                justify="between",
                            )
                            for cookie_type in [
                                "functional",
                                "performance",
                                "analytics",
                                "advertisement",
                                "others",
                            ]
                        ],
                        direction="column",
                        spacing="3",
                    ),
                    rx.flex(
                        rx.button(
                            "Save & Accept", type="submit"
                        ),
                        rx.dialog.close(
                            rx.button("Exit"),
                        ),
                        spacing="3",
                        margin_top="16px",
                        justify="end",
                    ),
                    on_submit=FormSwitchState2.handle_submit,
                    reset_on_submit=True,
                    width="100%",
                ),
            ),
        ),
        rx.divider(),
        rx.heading("Results"),
        rx.text(FormSwitchState2.form_data.to_string()),
        width="100%",
    )

A toggle switch alternative to the checkbox.

PropTypeDescriptionValues
as_childbool

Change the default rendered element for the one passed as a child, merging their props and behavior.

default_checkedbool

Whether the switch is checked by default

checkedbool

Whether the switch is checked

disabledbool

If true, prevent the user from interacting with the switch

requiredbool

If true, the user must interact with the switch to submit the form

namestr

The name of the switch (when submitting a form)

valuestr

The value associated with the "on" position

sizeUnion

Switch size "1" - "4"

variantLiteral

Variant of switch: "classic" | "surface" | "soft"

color_schemeLiteral

Override theme color for switch

high_contrastbool

Whether to render the switch with higher contrast color against background

radiusLiteral

Override theme radius for switch: "none" | "small" | "full"

Event Triggers

TriggerDescription
on_change

Props to rename Fired when the value of the switch changes

← SliderTextarea →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting