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.

@using Lumeo

<ToggleGroup />

Single Selection

Multiple Selection

Outline Variant

Sizes

Disabled Items

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 Sm, Default, and Lg 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.

Property	Type	Default	Description
Type	ToggleGroupType	Single	Selection mode. Values: Single (only one item active), Multiple (any number of items active).
Variant	ToggleGroupVariant	Default	Visual style applied to all items. Values: Default, Outline.
Size	ToggleGroupSize	Default	Size applied to all items. Values: Default, Sm, Lg.
Value	string?	null	Selected value (Single mode). Supports @bind-Value.
ValueChanged	EventCallback<string?>	—	Fires when selection changes in Single mode.
SelectedValues	IEnumerable<string>?	null	Selected values (Multiple mode). Supports @bind-SelectedValues.
SelectedValuesChanged	EventCallback<IEnumerable<string>>	—	Fires when selection changes in Multiple mode.

Property	Type	Default	Description
Value	string	""	Unique identifier for this item within the group. Required.
Disabled	bool	false	When true, this specific item is non-interactive.
PressEffect	Button.ButtonPressEffect	None	Press feedback animation. Values: None, Scale, Brightness, Ripple.

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.