# Toggle Group

Source: https://lumeo.nativ.sh/components/toggle-group

# Toggle Group

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

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<ToggleGroup />

Preview Code

Single Selection

Preview Code

Multiple Selection

Preview Code

Outline Variant

Preview Code

Sizes

Preview Code

Disabled Items

Preview Code

Controlled (Bound Value)

Selected: none

Preview Code

Variant — interactive preview

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

Default Outline

Preview Code

Size — interactive preview

Switch Size to see Sm, Default, and Lg applied to the group.

Sm Default Lg

Preview Code

Type — interactive preview

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

Single Multiple

Mode: Single — try clicking multiple items

Preview Code

PressEffect — interactive preview

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

None Scale Brightness Ripple

Effect: None

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

## API Reference

### ToggleGroup

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.

### ToggleGroupItem

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.

## Related Components

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