New components library - Native UI

︲

︲

Toggle Group

A set of two-state buttons that can be toggled on or off.

Installation

Copy the following code into your app directory.

uv

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

Anatomy

Use the following composition to build a Toggle Group component.

toggle_group( toggle_group.item("Option 1", value="1"), toggle_group.item("Option 2", value="2"), )

Examples

Outline

Use variant="outline" for an outline style.

import reflex as rx

from components.ui.toggle_group import toggle_group


def toggle_group_outline() -> rx.Component:
    return toggle_group.root(
        toggle_group.item(
            "All",
            value="all",
            aria_label="Toggle all",
        ),
        toggle_group.item(
            "Missed",
            value="missed",
            aria_label="Toggle missed",
        ),
        variant="outline",
        default_value=["all"],
    )

Sizes

Use the size prop to change the size of the toggle group.

import reflex as rx

from components.ui.toggle_group import toggle_group


def toggle_group_sizes() -> rx.Component:
    return rx.el.div(
        toggle_group.root(
            toggle_group.item("Top", value="top", aria_label="Toggle top"),
            toggle_group.item("Bottom", value="bottom", aria_label="Toggle bottom"),
            toggle_group.item("Left", value="left", aria_label="Toggle left"),
            toggle_group.item("Right", value="right", aria_label="Toggle right"),
            size="sm",
            variant="outline",
            default_value=["top"],
        ),
        toggle_group.root(
            toggle_group.item("Top", value="top", aria_label="Toggle top"),
            toggle_group.item("Bottom", value="bottom", aria_label="Toggle bottom"),
            toggle_group.item("Left", value="left", aria_label="Toggle left"),
            toggle_group.item("Right", value="right", aria_label="Toggle right"),
            variant="outline",
            default_value=["top"],
        ),
        class_name="flex flex-col gap-4",
    )

Spacing

Use spacing to add spacing between toggle group items.

import reflex as rx

from components.ui.toggle_group import toggle_group


def toggle_group_spacing() -> rx.Component:
    return toggle_group.root(
        toggle_group.item("Top", value="top", aria_label="Toggle top"),
        toggle_group.item("Bottom", value="bottom", aria_label="Toggle bottom"),
        toggle_group.item("Left", value="left", aria_label="Toggle left"),
        toggle_group.item("Right", value="right", aria_label="Toggle right"),
        size="sm",
        variant="outline",
        spacing=4,
        default_value=["top"],
    )

Vertical

Use orientation="vertical" for vertical toggle groups.

import reflex as rx

from components.ui.toggle_group import toggle_group


def toggle_group_vertical() -> rx.Component:
    return toggle_group.root(
        toggle_group.item(
            rx.icon(tag="bold"),
            value="bold",
            aria_label="Toggle bold",
        ),
        toggle_group.item(
            rx.icon(tag="italic"),
            value="italic",
            aria_label="Toggle italic",
        ),
        toggle_group.item(
            rx.icon(tag="underline"),
            value="underline",
            aria_label="Toggle underline",
        ),
        multiple=True,
        orientation="vertical",
        spacing=1,
        default_value=["bold", "italic"],
    )
import reflex as rx

from components.icons.hugeicon import hi
from components.ui.toggle_group import toggle_group


def toggle_group_disabled() -> rx.Component:
    return toggle_group.root(
        toggle_group.item(
            hi("TextBoldIcon"),
            value="bold",
            aria_label="Toggle bold",
        ),
        toggle_group.item(
            hi("TextItalicIcon"),
            value="italic",
            aria_label="Toggle italic",
        ),
        toggle_group.item(
            hi("TextUnderlineIcon"),
            value="strikethrough",
            aria_label="Toggle strikethrough",
        ),
        disabled=True,
    )

Custom

A custom toggle group example.

Use font-normal to set the font weight.

import reflex as rx
from reflex.experimental import ClientStateVar

from components.ui.field import field
from components.ui.toggle_group import toggle_group

font_weight = ClientStateVar.create("font_weight_selector", "normal")


def toggle_group_custom() -> rx.Component:

    return field.set(
        field.root(
            field.label("Font Weight"),
            toggle_group.root(
                toggle_group.item(
                    rx.el.span("Aa", class_name="text-2xl leading-none font-light"),
                    rx.el.span("Light", class_name="text-xs text-muted-foreground"),
                    value="light",
                    aria_label="Light",
                    class_name="flex !size-16 flex-col items-center justify-center rounded-xl",
                ),
                toggle_group.item(
                    rx.el.span("Aa", class_name="text-2xl leading-none font-normal"),
                    rx.el.span("Normal", class_name="text-xs text-muted-foreground"),
                    value="normal",
                    aria_label="Normal",
                    class_name="flex !size-16 flex-col items-center justify-center rounded-xl",
                ),
                toggle_group.item(
                    rx.el.span("Aa", class_name="text-2xl leading-none font-medium"),
                    rx.el.span("Medium", class_name="text-xs text-muted-foreground"),
                    value="medium",
                    aria_label="Medium",
                    class_name="flex !size-16 flex-col items-center justify-center rounded-xl",
                ),
                toggle_group.item(
                    rx.el.span("Aa", class_name="text-2xl leading-none font-bold"),
                    rx.el.span("Bold", class_name="text-xs text-muted-foreground"),
                    value="bold",
                    aria_label="Bold",
                    class_name="flex !size-16 flex-col items-center justify-center rounded-xl",
                ),
                on_value_change=font_weight.set_value,
                variant="outline",
                spacing=2,
                size="lg",
            ),
            field.description(
                "Use ",
                rx.el.code(
                    f"font-{font_weight.value}",
                    class_name="rounded-md bg-muted px-1 py-0.5 font-mono",
                ),
                " to set the font weight.",
            ),
        )
    )

The default spacing is 2 so toggle groups render with space between items by default. Use spacing={0} for connected items.