New components library - Native UI

︲

︲

Switch

A control that allows the user to toggle between checked and not checked.

Installation

Copy the following code into your app directory.

uv

uv run buridan add component switch
from components.ui.switch import switch

Anatomy

Use the following composition to build a Switch component.

switch.root( switch.thumb(), )

Examples

Description

A standard switch layout featuring a secondary descriptive text block nested alongside the core field.label and switch.root within a vertical field.root layout.

Focus is shared across devices, and turns off when you leave the app.

import reflex as rx

from components.ui.field import field
from components.ui.switch import switch


def switch_description() -> rx.Component:
    return field.root(
        field.content(
            field.label("Share across devices", html_for="switch-focus-mode"),
            field.description(
                "Focus is shared across devices, and turns off when you leave the app."
            ),
        ),
        switch.root(
            switch.thumb(),
            id="switch-focus-mode",
        ),
        orientation="horizontal",
        class_name="max-w-sm px-2",
    )

Choice Card

Card-style selection where field.label wraps the entire field.root layout pattern to create a fully clickable target container.

import reflex as rx

from components.ui.field import field
from components.ui.switch import switch


def switch_choice_card() -> rx.Component:
    return field.group(
        field.label(
            field.root(
                field.content(
                    field.title("Share across devices"),
                    field.description(
                        "Focus is shared across devices, and turns off when you leave the app."
                    ),
                ),
                switch.root(id="switch-share"),
                orientation="horizontal",
            ),
            html_for="switch-share",
        ),
        field.label(
            field.root(
                field.content(
                    field.title("Enable notifications"),
                    field.description(
                        "Receive notifications when focus mode is enabled or disabled."
                    ),
                ),
                switch.root(id="switch-notifications", default_checked=True),
                orientation="horizontal",
            ),
            html_for="switch-notifications",
        ),
        class_name="w-full max-w-sm my-8",
    )

Disabled

Pass the disabled=True prop directly to the switch.root component to deactivate user input. Pass the data_disabled="true" attribute to the field.root layout component for contextual styling.

import reflex as rx

from components.ui.field import field
from components.ui.switch import switch


def switch_disabled() -> rx.Component:

    return field.root(
        switch.root(
            id="switch-disabled-unchecked",
            disabled=True,
        ),
        field.label(
            "Disabled",
            html_for="switch-disabled-unchecked",
        ),
        orientation="horizontal",
        data_disabled="true",
        class_name="w-fit ",
    )

Invalid

Pass the aria_invalid="true" prop to the switch.root component to explicitly communicate an unfulfilled state. Pass the data_invalid="true" attribute to the field.root container layout to trigger error typography theme changes automatically.

You must accept the terms and conditions to continue.

import reflex as rx

from components.ui.field import field
from components.ui.switch import switch


def switch_invalid() -> rx.Component:
    return field.root(
        field.content(
            field.label(
                "Accept terms and conditions",
                html_for="switch-terms",
            ),
            field.description("You must accept the terms and conditions to continue."),
        ),
        switch.root(
            id="switch-terms",
            aria_invalid="true",
        ),
        orientation="horizontal",
        data_invalid="true",
        class_name="max-w-sm",
    )

Size

Use the size property on switch.root to scale the toggle boundaries down to "sm" or return to "default". Stack components smoothly inside a unified layout using a field.group block.

import reflex as rx

from components.ui.field import field
from components.ui.switch import switch


def switch_sizes() -> rx.Component:
    return field.group(
        field.root(
            switch.root(
                id="switch-size-sm",
                size="sm",
            ),
            field.label(
                "Small",
                html_for="switch-size-sm",
            ),
            orientation="horizontal",
        ),
        field.root(
            switch.root(
                id="switch-size-default",
                size="default",
            ),
            field.label(
                "Default",
                html_for="switch-size-default",
            ),
            orientation="horizontal",
        ),
        class_name="w-full max-w-[10rem]",
    )