# ToggleGroup A strip of toggles that acts as one control — pick one, or pick several. ```slint 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 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 ```slint import { ToggleGroup } from "@glint/components/toggle-group.slint"; import { IconSet } from "@lucide"; export component AppWindow inherits Window { in-out property 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. ```slint 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`). ```slint 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. ```slint 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 }, ]; } } } } ``` ### Multi-selection formatting toolbar Use `ToggleGroupMultiple` when multiple toggles can be active simultaneously (such as rich text formatting with Bold, Italic, and Underline). ```slint 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.