︲

︲

Toggle Group

Custom toggle group component.

Installation

Copy the following code into your app directory.

'toggle_group' not found

Usage

'toggle_group' not found

Anatomy

Use the following composition to build a Toggle Group

'toggle_group' not found

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