Live demo — this example is server-driven; run the showcase locally for the interactive version.

Toggle group

A row of buttons that act as a single-select or multi-select toggle — like radio buttons or checkboxes, but rendered as a button-bar. Selection state is driven by aria-pressed on each button.

Examples

Single select

One pressed item at a time.

Multi select

Independent toggles.

With icons

Icon-only buttons.

With text and icons

Icon + label per button.

Compact

pf-m-compact.

Full-width

pf-m-fill stretches the group.

Documentation

Toggle group props

Parameters accepted by {#include components/forms/toggle-group ... /}. Model mode: pass toggleGroup=<ToggleGroup> built in Java instead — the Java tab on each example shows the builder. The ToggleGroup model generates the items; in param mode they are hand-rendered in the slot (each item is a pf-v6-c-toggle-group__item wrapping a button with aria-pressed and an optional pf-m-selected modifier).

* required
Name	Type	Description
* `id`	String	DOM id on the container.
`ariaLabel`	String	Group-level accessible name (since the group has role="group").
slot `content`	Qute block	Toggle items — see examples for the structure.

Usage

Selection state is consumer-driven. The runtime template only renders the container. Use Alpine (as shown in the examples) or server-side rendering with pf-m-selected + aria-pressed="true" on the active button.

Vs. Radio / Checkbox. Use toggle-group when the choice is visually a "button bar" — view mode, alignment, formatting toggles. Use radios in forms where you submit a value.

Edit toggle-group.html on GitHub