Toggle Group

A set of two-state buttons that can be toggled on or off.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<ToggleGroup />

Single Selection

Multiple Selection

Outline Variant

Sizes

Disabled Items

Vertical Orientation

Orientation=Vertical stacks the items and switches roving arrow-key navigation to Up/Down (aria-orientation and data-orientation are set to vertical).

Controlled (Bound Value)

Selected: none

Variant — interactive preview

Switch Variant to see Default vs Outline styling applied to all items.

Size — interactive preview

Switch Size to see all 7 rungs applied to the group.

Type — interactive preview

Single allows only one active item; Multiple allows any number.

Mode: Single — try clicking multiple items

PressEffect — interactive preview

Choose a PressEffect and click any item to feel the animation.

Effect: None

Switch the press effect and then click the items to feel the difference.

API Reference

ToggleGroup

ToggleGroupItem

Styling hooks (data-state)

Each item exposes data-state="on" / "off", data-disabled when disabled, and data-orientation matching the group, so pressed and layout styling can be driven entirely from CSS hooks.

Toggle — A single two-state button; use ToggleGroup when you need several coordinated toggles.
RadioGroup — Use for form-based single selection from a list of labelled options.
Segmented — A tab-like control for switching between views rather than toggling formatting.
Button — Use for one-shot actions; Toggle/ToggleGroup for persistent state.