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%",
)Did you find this useful?
