AdwToggleGroup

Preview

Each toggle shows a label, an icon (name it with a tooltip), both, or a custom child. Without active or activeName the group keeps its own active toggle, starting with the first enabled one.

CSS Node Tree

toggle-group[.horizontal|.vertical]
├── toggle.toggle[.text-button|.image-button|.image-text-button]
│   └── label | image | buttoncontent
├── separator.horizontal|.vertical[.hidden]
└── toggle.toggle
    └── ...

The separators take the group's orientation. A separator next to a hovered, checked or keyboard-focused toggle gets .hidden.

Props

Prop

Type

Style Classes

Class	Effect
`.flat`	No background, so the toggles look like a group of flat buttons
`.round`	Rounded group and toggles
`.flat.round`	Both combined

Homogeneous

With homogeneous, every toggle is as wide as the widest one.

The toggles share any extra width the group gets. With canShrink (the default) their labels ellipsize when the group is narrower than its contents.

Keyboard

Tab — focuses the active toggle, and leaves the group from any toggle
Arrow keys — move the focus between the toggles without activating them
Space / Enter — activates the focused toggle (adds .keyboard-activating while it does)

Adwaita Documentation →