Switch
A toggle switch alternative to the checkbox.
Basic Example
Here is a basic example of a switch. We use the on_change trigger to toggle the value in the state.
Control the value
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 second switch is disabled we are still able to change whether it is checked or not using the checked prop.
ExpandCollapse
Switch in forms
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.
Example Form
Results:
{}ExpandCollapse
API Reference
rx.switch
A toggle switch alternative to the checkbox.
disabledsizevariantcolor_schemehigh_contrastradiusProps
| Prop | Type | Description |
|---|---|---|
as_child | bool | Change the default rendered element for the one passed as a child, merging their props and behavior. |
default_checked | bool | Whether the switch is checked by default. |
checked | bool | Whether the switch is checked. |
disabled | bool | If true, prevent the user from interacting with the switch. |
required | bool | If true, the user must interact with the switch to submit the form. |
name | str | The name of the switch (when submitting a form). |
value | str | The value associated with the "on" position. |
size | "1""2""3" | Switch size "1" - "4". |
variant | "classic""surface""soft" | Variant of switch: "classic" | "surface" | "soft". |
color_scheme | "tomato""red""ruby""crimson""pink""plum""purple""violet""iris""indigo""blue""cyan""teal""jade""green""grass""brown""orange""sky""mint""lime""yellow""amber""gold""bronze""gray" | Override theme color for switch. |
high_contrast | bool | Whether to render the switch with higher contrast color against background. |
radius | "none""small""full" | Override theme radius for switch: "none" | "small" | "full". |