Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Chakra

/

Forms

/

Switch

The Switch component is used as an alternative for the Checkbox component. You can switch between enabled or disabled states.

Switch off!

class SwitchState1(rx.State):
    checked: bool = False
    is_checked: bool = "Switch off!"

    def change_check(self, checked: bool):
        self.checked = checked
        if self.checked:
            self.is_checked = "Switch on!"
        else:
            self.is_checked = "Switch off!"


def switch_example():
    return rx.chakra.vstack(
        rx.chakra.heading(SwitchState1.is_checked),
        rx.chakra.switch(
            is_checked=SwitchState1.checked,
            on_change=SwitchState1.change_check,
        ),
    )

You can also change the color scheme of the Switch component by passing the color_scheme argument. The default color scheme is blue.

rx.chakra.hstack(
    rx.chakra.switch(color_scheme="red"),
    rx.chakra.switch(color_scheme="green"),
    rx.chakra.switch(color_scheme="yellow"),
    rx.chakra.switch(color_scheme="blue"),
    rx.chakra.switch(color_scheme="purple"),
)

Toggleable switch component.

PropTypeDescriptionValues
is_checkedbool

If true, the switch will be checked. You'll need to set an on_change event handler to update its value (since it is now controlled)

is_disabledbool

If true, the switch will be disabled

is_focusablebool

If true and is_disabled prop is set, the switch will remain tabbable but not interactive.

is_invalidbool

If true, the switch is marked as invalid. Changes style of unchecked state.

is_read_onlybool

If true, the switch will be readonly

is_requiredbool

If true, the switch will be required

namestr

The name of the input field in a switch (Useful for form submission).

valuestr

The value of the input field when checked (use is_checked prop for a bool)

spacingstr

The spacing between the switch and its label text (0.5rem)

placeholderstr

The placeholder text.

color_schemeLiteral

The color scheme of the switch (e.g. "blue", "green", "red", etc.)

Event Triggers

TriggerDescription
on_change

Fired when the switch value changes

Did you find this useful?

HomeGalleryChangelogIntroductionHosting