Toggle Group

A set of two-state buttons that can be toggled on or off. Supports single and multiple selection modes.

Text Formatting

Selected format:

Installation

CLI

Install the component using the StarUI CLI:

star add toggle-group

Examples

View Mode Switcher

Toggle between different content layouts with dynamic content display

View Mode

Item 1

Item 2

Item 3

Item 4

Item 1

Item 2

Item 3

Item 4

Item 1

Description for item 1

Item 2

Description for item 2

Multi-Select Filters

Multiple selection toggle group for filtering options

Filter Options

Active Filters:

Size Variations

Toggle groups in different sizes for various use cases

Small

Default

Large

Editor Controls

Combine single and multiple selection groups for rich text editing

Text Alignment

Text Decoration

The quick brown fox jumps over the lazy dog. This sample text demonstrates the selected text alignment and decoration options.

Variant Styles

Different visual styles and combinations with icons

Default Variant

Outline Variant

With Icons

Form Integration

Complex form scenarios with multiple toggle groups and live feedback

Notification Preferences

Communication Methods:

Notification Frequency:

Summary:

Methods:

Frequency:

from starhtml import *
from starui import *

communication_methods = Signal("communication_methods", _ref_only=True)
frequency = Signal("frequency", _ref_only=True)

methods_text = collect([
    (communication_methods.contains("email"), "Email"),
    (communication_methods.contains("sms"), "SMS"),
    (communication_methods.contains("push"), "Push"),
], join_with=", ")

Div(
    communication_methods, frequency,
    P("Notification Preferences", cls="font-medium mb-4"),
    Div(
        Label("Communication Methods:", cls="text-sm font-medium mb-2 block"),
        ToggleGroup(
            ("email", Div(Icon("lucide:mail", cls="w-4 h-4"), "Email", cls="flex items-center gap-2")),
            ("sms", Div(Icon("lucide:message-square", cls="w-4 h-4"), "SMS", cls="flex items-center gap-2")),
            ("push", Div(Icon("lucide:bell", cls="w-4 h-4"), "Push", cls="flex items-center gap-2")),
            type="multiple",
            variant="outline",
            signal=communication_methods
        ),
        cls="mb-6"
    ),
    Div(
        Label("Notification Frequency:", cls="text-sm font-medium mb-2 block"),
        ToggleGroup(
            ("immediate", "Immediate"),
            ("daily", "Daily Digest"),
            ("weekly", "Weekly Summary"),
            ("never", "Never"),
            type="single",
            signal=frequency,
            orientation="vertical",
            cls="w-full"
        ),
        cls="mb-6",
        data_show=communication_methods.length > 0
    ),
    Div(
        P("Summary:", cls="text-sm font-medium mb-2"),
        Div(
            P("Methods: ", data_text=methods_text.or_("None"),
              cls="text-sm mb-1"),
            P("Frequency: ", data_text=frequency.or_("Not set"),
              cls="text-sm"),
            cls="bg-muted p-3 rounded text-sm"
        ),
    ),
    cls="p-4 border rounded-lg w-full max-w-lg"
)

Disabled States

Toggle groups in disabled states for different scenarios

Disabled States

Dynamic Disabling

Fully Disabled

API Reference

Component	Description
`ToggleGroup`	A toggle group with single or multiple selection. Pass items as (value, content) tuples. Selection is exposed as `{signal}_value` (str for single, list[str] for multiple).