Switch

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

Installation

Command to install the Switch component.

buridan add switch

uv run buridan add switch

python -m buridan add switch

Component Guide

Use the following to build the Switch component.

from components.ui.switch import switch

switch.root()

Source Code & Dependencies

For manual installation, copy each of the source codes below in their respective locations.

components/core/core.py

components/ui/switch.py

Examples

Basic

A simple switch rendering an internal semantic label using the inline label_text argument.

Props used: label_text as the first argument in switch.root.

Strict Mode

Enable strict validation protocols across all incoming API payloads.

import reflex as rx

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


def switch_basic() -> rx.Component:
    return field.root(
        field.content(
            field.title("Strict Mode"),
            field.description(
                "Enable strict validation protocols across all incoming API payloads."
            ),
        ),
        switch.root(id="strict-mode"),
        orientation="horizontal",
        class_name="justify-between items-center border rounded-lg p-4 w-full max-w-md",
    )

Choice Card

Card-style premium selection where field.label wraps the entire layout block. Clicking anywhere on the card container natively triggers the nested switch checkbox.

Props used: id on switch.root; html_for on field.label.

Enterprise Pipeline

Deploy dedicated runners, isolated networks, and unlimited concurrency.

import reflex as rx

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


def switch_with_label() -> rx.Component:
    return field.label(
        rx.el.div(
            field.content(
                field.title("Enterprise Pipeline"),
                field.description(
                    "Deploy dedicated runners, isolated networks, and unlimited concurrency."
                ),
            ),
            switch.root(id="enterprise-plan"),
            class_name="flex items-start justify-between gap-4 max-w-sm",
        ),
        html_for="enterprise-plan",
    )

Sizes

Two size variants available side by side—sm for tight, compact toolbars or layouts, and the default size for normal structural form elements.

Props used: size on switch.root; orientation="horizontal" on field.root.

Small

Default

# 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(
#             field.label(
#                 "Testing",
#                 switch.root(id="test-plan"),
#                 html_for="test-plan",
#             ),
#         ),
#         field.root(
#             field.label(
#                 switch.root(id="size-sm", size="sm"),
#                 "Small Tweak", html_for="size-sm", class_name="text-xs w-full",
#             ),
#             orientation="horizontal",
#         ),
#         # field.root(
#         #     switch.root(id="size-default", size="default"),
#         #     field.label("Default Scale", html_for="size-default"),
#         #     orientation="horizontal",
#         # ),
#         class_name="w-full flex justify-center items-center"
#     )

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]",
    )

Invalid

An invalid or error state signaling form validation failures. The switch track highlights structural errors through aria-invalid, and the parent field.root dynamically updates text styling to the system's destructive state.

Props used: invalid on switch.root; data-invalid="true" on field.root.

Accept terms and conditions

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",
    )

Disabled

A disabled switch control with interaction constraints. Disabling cascades visually and functionally down to the control via structural group-has-[:disabled] selectors, lowering control opacity and locking out all user inputs.

Props used: disabled on switch.root; data-disabled="true" on field.root.

Disabled

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-full max-w-[10rem]",
    )

API Reference

switch.root

The main switch control component. Renders an accessible, zero-latency toggle using a native hidden checkbox input element wrapped in a clickable semantic label layout block.

switch.root("Enable notifications", id="notify", size="default")

Prop	Type	Default	Description
`label_text`	`str`	`""`	Optional descriptive label string inserted directly alongside the switch.
`size`	`Literal["default", "sm"]`	`"default"`	Sets the physical width/height scaling of the track and thumb elements.
`invalid`	`bool`	`False`	Sets `aria-invalid="true"` to trigger error styling.
`disabled`	`bool`	`False`	Disables interaction and drops opacity.
`checked`	`bool`		Controlled component state binding.
`default_checked`	`bool`		Uncontrolled default initial state setting.
`track_class_name`	`str`	`""`	Fine-grain custom Tailwind class overrides directly injected onto the track.
`thumb_class_name`	`str`	`""`	Fine-grain custom Tailwind class overrides directly injected onto the thumb.
`id`	`str`		Unique identifier assigned directly to the inner hidden input peer.
`name`	`str`		Form submission parameter identifier.
`on_change`	`EventHandler`		Fired instantly as soon as the switch toggle changes state.

Any other attribute accepted by a standard HTML <input type="checkbox"> (required, value, etc.) will pass straight through to the inner input control peer.

External Tools

︲

On This Page