ToggleGroup

A strip of toggles that acts as one control — pick one, or pick several.

import { ToggleGroup, ToggleGroupItem } from "@glint/components/toggle-group.slint";
import { Tokens } from "@glint/theme/tokens.slint";
import { IconSet } from "@lucide";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    in-out property <int> alignment-index: 0;

    VerticalLayout {
        alignment: center;
        spacing: 16px;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            ToggleGroup {
                selected <=> root.alignment-index;
                items: [
                    { label: "Left", icon: IconSet.AlignLeft, icon-only: true },
                    { label: "Center", icon: IconSet.AlignCenter, icon-only: true },
                    { label: "Right", icon: IconSet.AlignRight, icon-only: true },
                    { label: "Justify", icon: IconSet.AlignJustify, icon-only: true },
                ];
            }
        }

        Text {
            text: "Selected index: " + root.alignment-index;
            color: Tokens.color-muted-foreground;
            font-size: Tokens.typography-body-sm-size;
            horizontal-alignment: center;
        }
    }
}

Usage

import { ToggleGroup } from "@glint/components/toggle-group.slint";
import { IconSet } from "@lucide";

export component AppWindow inherits Window {
    in-out property <int> view-mode: 0;

    VerticalLayout {
        alignment: center;

        ToggleGroup {
            selected <=> root.view-mode;
            items: [
                { label: "Grid View", icon: IconSet.LayoutGrid },
                { label: "List View", icon: IconSet.List },
            ];
            changed(index) => {
                // handle mode change
            }
        }
    }
}

ToggleGroup renders a cohesive set of mutually exclusive toggle buttons (for single choice) or independent toggle buttons (using ToggleGroupMultiple for multi-selection toolbars).

Examples

Variants

variant applies styling to all items in the group:

ToggleGroupVariant.default: Clean background with accent highlight on active items.
ToggleGroupVariant.outline: Bordered item frames.

import { ToggleGroup, ToggleGroupVariant } from "@glint/components/toggle-group.slint";
import { Tokens } from "@glint/theme/tokens.slint";
import { IconSet } from "@lucide";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        spacing: 16px;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 24px;

            ToggleGroup {
                variant: ToggleGroupVariant.default;
                selected: 0;
                items: [
                    { label: "Day", icon: IconSet.Sun, icon-only: true },
                    { label: "Night", icon: IconSet.Moon, icon-only: true },
                ];
            }

            ToggleGroup {
                variant: ToggleGroupVariant.outline;
                selected: 1;
                items: [
                    { label: "Day", icon: IconSet.Sun, icon-only: true },
                    { label: "Night", icon: IconSet.Moon, icon-only: true },
                ];
            }
        }
    }
}

Sizes

size configures item height and density:

ToggleGroupSize.sm: Compact height (28px).
ToggleGroupSize.default: Standard height (36px).
ToggleGroupSize.lg: Larger height (40px).

import { ToggleGroup, ToggleGroupSize } from "@glint/components/toggle-group.slint";
import { Tokens } from "@glint/theme/tokens.slint";
import { IconSet } from "@lucide";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        spacing: 16px;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 16px;

            ToggleGroup {
                size: ToggleGroupSize.sm;
                items: [
                    { label: "One" },
                    { label: "Two" },
                ];
            }

            ToggleGroup {
                size: ToggleGroupSize.default;
                items: [
                    { label: "One" },
                    { label: "Two" },
                ];
            }

            ToggleGroup {
                size: ToggleGroupSize.lg;
                items: [
                    { label: "One" },
                    { label: "Two" },
                ];
            }
        }
    }
}

Orientations

The orientation property arranges items horizontally or vertically:

ToggleGroupOrientation.horizontal: Row layout (default).
ToggleGroupOrientation.vertical: Stacked column layout.

import { ToggleGroup, ToggleGroupOrientation } from "@glint/components/toggle-group.slint";
import { Tokens } from "@glint/theme/tokens.slint";
import { IconSet } from "@lucide";

export component Demo inherits Window {
    width: 560px;
    height: 320px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        spacing: 20px;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 32px;

            ToggleGroup {
                orientation: ToggleGroupOrientation.horizontal;
                items: [
                    { label: "Left", icon: IconSet.AlignLeft, icon-only: true },
                    { label: "Center", icon: IconSet.AlignCenter, icon-only: true },
                    { label: "Right", icon: IconSet.AlignRight, icon-only: true },
                ];
            }

            ToggleGroup {
                orientation: ToggleGroupOrientation.vertical;
                items: [
                    { label: "Top", icon: IconSet.ArrowUp, icon-only: true },
                    { label: "Middle", icon: IconSet.Minus, icon-only: true },
                    { label: "Bottom", icon: IconSet.ArrowDown, icon-only: true },
                ];
            }
        }
    }
}

Use ToggleGroupMultiple when multiple toggles can be active simultaneously (such as rich text formatting with Bold, Italic, and Underline).

import { ToggleGroupMultiple, ToggleGroupItem } from "@glint/components/toggle-group.slint";
import { Tokens } from "@glint/theme/tokens.slint";
import { IconSet } from "@lucide";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    in-out property <[ToggleGroupItem]> format-items: [
        { label: "Bold", icon: IconSet.Bold, icon-only: true, on: true },
        { label: "Italic", icon: IconSet.Italic, icon-only: true, on: false },
        { label: "Underline", icon: IconSet.Underline, icon-only: true, on: true },
    ];

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            ToggleGroupMultiple {
                items <=> root.format-items;
            }
        }
    }
}

API Reference

Properties

Property	Type	Default	Description
`items`	`in [ToggleGroupItem]`	no default	Toggles shown in the group.
`selected`	`in-out int`	`0`	Two-way; index of the active toggle.
`orientation`	`in ToggleGroupOrientation`	`ToggleGroupOrientation.horizontal`	`horizontal` (default) or `vertical`.
`variant`	`in ToggleGroupVariant`	`ToggleGroupVariant.default`	Visual style, handed to every item — `default` or `outline`.
`size`	`in ToggleGroupSize`	`ToggleGroupSize.default`	Density, handed to every item — sm, default, lg.
`disabled`	`in bool`	`false`	Takes the whole group away — the toolbar of a read-only document. An item may also refuse on its own; see `ToggleGroupItem.disabled`.

Callbacks

Callback	Description
`changed(int)`	Fired with the new `selected` index.

Enums

Enum	Values
`ToggleGroupOrientation`	`horizontal`, `vertical`
`ToggleGroupVariant`	`default`, `outline`
`ToggleGroupSize`	`sm`, `default`, `lg`

ToggleGroupMultiple

Multi-selection variant for toolbars where multiple buttons can be active simultaneously.

Properties

Property	Type	Default	Description
`items`	`in-out [ToggleGroupItem]`	no default	Toggles shown in the group. Two-way, because `on` is the state and it lives in the item — see `ToggleGroupItem.on` for why it is not a list of flags beside this one.
`focused`	`in-out int`	`0`	Two-way; where the keyboard stands. Not a selection: what it points at is what Space flips.
`orientation`	`in ToggleGroupOrientation`	`ToggleGroupOrientation.horizontal`	`horizontal` (default) or `vertical`.
`variant`	`in ToggleGroupVariant`	`ToggleGroupVariant.default`	Visual style, handed to every item — `default` or `outline`.
`size`	`in ToggleGroupSize`	`ToggleGroupSize.default`	Density, handed to every item — sm, default, lg.
`disabled`	`in bool`	`false`	Takes the whole group away — the toolbar of a read-only document. An item may also refuse on its own; see `ToggleGroupItem.disabled`.

Callbacks

Callback	Description
`toggled(int)`	Fired with the index of the item that flipped. Read `items[index].on` for which way it went.

Enums

Enum	Values
`ToggleGroupOrientation`	`horizontal`, `vertical`
`ToggleGroupVariant`	`default`, `outline`
`ToggleGroupSize`	`sm`, `default`, `lg`

Accessibility

Radio group vs Groupbox. ToggleGroup publishes accessible-role: radio-group with radio-button items. ToggleGroupMultiple publishes accessible-role: groupbox with checkbox items.
Focus delegation in ToggleGroupMultiple. Its accessible-delegate-focus ensures screen readers announce the currently focused item when traversing. ToggleGroup does not set this property.
Keyboard navigation. In ToggleGroup, arrow keys move and commit the selection. In ToggleGroupMultiple, arrow keys move focus without committing and Space or Enter toggles the focused item.

ToggleGroup

Usage

Examples

Variants

Sizes

Orientations

Multi-selection formatting toolbar

API Reference

Properties

Callbacks

Enums

ToggleGroupMultiple

Properties

Callbacks

Enums

Accessibility