︲

︲

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.component import toggle_group

Anatomy

Use the following composition to build a Toggle Group component.

toggle_group( toggle(), toggle(), )

Examples

General

A basic toggle group with single-selection mode, allowing only one active toggle at a time.

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

toggle_style = "flex size-8 items-center justify-center rounded-sm active:bg-secondary text-muted-foreground active:text-foreground"


def toggle_group_general():
    return toggle_group(
        toggle(hi("TextBoldIcon"), value="bold", class_name=toggle_style),
        toggle(hi("TextItalicIcon"), value="italic", class_name=toggle_style),
        toggle(hi("TextUnderlineIcon"), value="underline", class_name=toggle_style),
        default_value=["bold"],
        class_name="flex gap-px rounded-md border border-input bg-background p-0.5",
    )

Multiple Selection

Set multiple=True on the toggle_group() to allow multiple selections at the same time.

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

toggle_style = "flex size-8 items-center justify-center rounded-sm active:bg-secondary text-muted-foreground active:text-foreground"


def toggle_group_multiple_selection():
    return toggle_group(
        toggle(hi("TextAlignLeftIcon"), value="left", class_name=toggle_style),
        toggle(hi("TextAlignCenterIcon"), value="center", class_name=toggle_style),
        toggle(hi("TextAlignRightIcon"), value="right", class_name=toggle_style),
        default_value=["left", "right"],
        multiple=True,
        class_name="flex gap-px rounded-md border border-input bg-background p-0.5",
    )