ReflexKR

The Component Workshop: Reflex's 100 Library Components

Course overview

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typography

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Forms

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Data display

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Disclosure

Tabs

Accordion

Segmented Control

Overlay

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamic rendering

Cond

Match

Foreach

Auto Scroll

Media

Image

Audio

Video

Tables and data grids

Table

Data Table

Data Editor

Charts

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Chart parts

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Other chart libraries

Plotly

Pyplot

HTML elements

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Other tools

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

The Component Workshop: Reflex's 100 Library Components

Forms

Switch

rx.switch

Official docs

Workshop order

Add three notification on/off switches to the app's settings screen. A summary below should show which ones are on right now.

rx.switch takes the same yes/no value as a checkbox, shaped like a switch. It suits settings that apply immediately, where flipping it changes something right away. For values collected and sent on submit, like agreeing to terms or picking from a list, Checkbox feels more natural.

rx.switch(default_checked=True)

Try the props

size

variant

color

radius

high_contrast

disabled

rx.switch(default_checked=True, size="2", variant="surface", color_scheme="indigo", radius="full", high_contrast=False, disabled=False)

radius only accepts none, small and full. Even when disabled, it can still be changed through checked (see "Controlling the value" below).

Prop	Values	Default	Use
`checked`	`True` / `False` / Var	none	Controlled value (with `on_change`)
`default_checked`	`True` / `False`	`False`	Value set only once at the start
`size`	`"1"` – `"3"`	`"2"`	Size
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	Look
`color_scheme`, `high_contrast`	Radix color name / `True`	theme value	On color and contrast
`radius`	`"none"` `"small"` `"full"`	theme value	Corners
`disabled`	`True` / `False`	`False`	Keep the user from flipping it
`name`, `value`, `required`	string / `True`	none / `"on"`	Form name and value; must be on to submit
`on_change`	event		When flipped on or off. Passes `True`/`False`

Getting the value with on_change

Every time the switch moves, on_change passes the new value. Store it in the State and you can use it anywhere else on the screen.

false

class SwitchBasicState(rx.State):
    value: bool = False

    @rx.event
    def set_value(self, value: bool):
        self.value = value


rx.hstack(
    rx.switch(on_change=SwitchBasicState.set_value),
    rx.badge(SwitchBasicState.value.to_string()),
    align="center",
)

Controlling the value: checked

Give checked a State value and the switch follows it. Both switches below look at the same value, so moving one moves both. The second switch has disabled=True, so you can't click it directly, but it moves whenever checked changes. The same goes for changing the value on the server, for example from a button.

class SwitchControlState(rx.State):
    checked: bool = True

    @rx.event
    def change_checked(self, checked: bool):
        self.checked = checked

    @rx.event
    def flip(self):
        self.checked = not self.checked


rx.hstack(
    rx.switch(checked=SwitchControlState.checked, on_change=SwitchControlState.change_checked),
    rx.switch(checked=SwitchControlState.checked, on_change=SwitchControlState.change_checked, disabled=True),
    rx.button("Flip from server", on_click=SwitchControlState.flip, size="1", variant="soft"),
    align="center",
    spacing="4",
)

Adding a label

Unlike Checkbox, rx.switch has no label argument. Wrap the switch and the text together in rx.text(..., as_="label") and clicking the text flips the switch too.

Wi-Fi

rx.text(
    rx.flex(rx.switch(default_checked=True), "Wi-Fi", spacing="2", align="center"),
    as_="label",
    size="2",
)

Using it in a form

With a name, it goes into the form data. Only switches that are on are sent, as "on" (or the value you gave); switches that are off are left out. value is only what gets submitted; whether the switch is on is decided by checked. A switch with required=True must be on before the form submits.

Results:

{}

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

    @rx.event
    def handle_submit(self, form_data: dict):
        self.form_data = form_data


rx.card(
    rx.vstack(
        rx.form.root(
            rx.vstack(
                rx.text(rx.flex(rx.switch(name="email_alerts", value="yes"), "Email alerts", spacing="2"), as_="label", size="2"),
                rx.text(rx.flex(rx.switch(name="age_check", required=True), "I am over 14 (required)", spacing="2"), as_="label", size="2"),
                rx.button("Submit", type="submit"),
            ),
            on_submit=SwitchFormState.handle_submit,
            reset_on_submit=True,
        ),
        rx.divider(),
        rx.hstack(rx.text("Results:", weight="bold"), rx.badge(SwitchFormState.form_data.to_string())),
    ),
)

Filling the order

The list of setting names is a constant, so the rows are built with a Python list comprehension instead of rx.foreach. Each switch reads settings[name], and on_change passes the name along with the new value. The lambda's n=name is a default argument that captures the name on each iteration.

Order updates

Delivery alerts

Coupons

On: Order updates, Delivery alerts

SWITCH_SETTING_NAMES = ["Order updates", "Delivery alerts", "Coupons"]


class SwitchSettingsState(rx.State):
    settings: dict[str, bool] = {"Order updates": True, "Delivery alerts": True, "Coupons": False}

    @rx.event
    def toggle(self, name: str, value: bool):
        self.settings = {**self.settings, name: value}

    @rx.var
    def summary(self) -> str:
        on = [k for k in SWITCH_SETTING_NAMES if self.settings.get(k)]
        return ", ".join(on) if on else "Nothing"


rx.card(
    rx.vstack(
        *[
            rx.hstack(
                rx.text(name, size="2"),
                rx.spacer(),
                rx.switch(
                    checked=SwitchSettingsState.settings[name],
                    on_change=lambda v, n=name: SwitchSettingsState.toggle(n, v),
                ),
                width="100%",
                align="center",
            )
            for name in SWITCH_SETTING_NAMES
        ],
        rx.divider(),
        rx.text("On: ", SwitchSettingsState.summary, size="1", color_scheme="gray"),
        width="260px",
    ),
)

Workshop notes

Use rx.switch for settings that apply immediately, Checkbox for values collected on submit.
on_change passes True/False. To control it, use checked + on_change.
disabled only stops the user. When checked changes, the switch changes too.
Add a label by wrapping it in rx.text(..., as_="label").
In a form, only switches that are on are sent, as name: "on" (or value).

← Previous

Forms · Checkbox

Forms · Radio Group

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.