ToggleGroup
A set of two-state buttons that can be toggled on or off
Divergence from Blok
Explicit ToggleGroupType enum and separate single/multi bindings, instead of Blok's union-type type discriminator. Blok uses Radix's type="single"/type="multiple" discriminated union where the value prop type shifts between string and string[]. Blazor doesn't handle discriminated unions cleanly, so we expose ToggleGroupType.Single/ToggleGroupType.Multiple and use Value/ValueChanged (single) or Values/ValuesChanged (multiple) depending on the chosen type. Behaviour, keyboard mechanics, and visuals match Blok — just the binding API differs.
Examples
Single selection
Active: bold
Multiple selection
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| ToggleGroup | Container for a set of ToggleGroupItem buttons. Coordinates selection through a cascading value; bind via Value/ValueChanged for single mode or Values/ValuesChanged for multiple. |
| ToggleGroupItem | A single button within a ToggleGroup. Its Value uniquely identifies it within the parent and drives the shared selection state. |
ToggleGroup
Container for a set of ToggleGroupItem buttons. Coordinates selection through a cascading value; bind via Value/ValueChanged for single mode or Values/ValuesChanged for multiple.
| Property | Type | Required | Description |
|---|---|---|---|
| Type | ToggleGroupType | Selection mode. Default: ToggleGroupType.Single (one item active at a time). Other value: Multiple (independent on/off per item). | |
| Variant | ToggleVariant | Visual style shared by child ToggleGroupItems. Default: ToggleVariant.Default. Other value: Outline. | |
| Size | ToggleSize | Size token shared by child ToggleGroupItems. Default: ToggleSize.Default. Other values: Sm, Lg. | |
| Disabled | bool | Disables every item. Item-level Disabled is unioned with this. Default: false. | |
| Value | string? | Active item's Value in single mode. Use with @bind-Value. | |
| ValueChanged | EventCallback<string?> | Fires when the active item changes in single mode. | |
| Values | List<string> | Active item Values in multiple mode. Use with @bind-Values. Default: empty list. | |
| ValuesChanged | EventCallback<List<string>> | Fires when the active set changes in multiple mode. | |
| ClassName | string? | Extra CSS classes appended to the group container. | |
| ChildContent | RenderFragment? | The group's items. Must be one or more ToggleGroupItem. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the group container. |
ToggleGroupItem
A single button within a ToggleGroup. Its Value uniquely identifies it within the parent and drives the shared selection state.
| Property | Type | Required | Description |
|---|---|---|---|
| Value | string | Unique identifier for this item. Matched against ToggleGroup.Value / Values to decide pressed state. | |
| Disabled | bool | When true, this item cannot be toggled. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the item button. | |
| ChildContent | RenderFragment? | Item label — typically an icon or short text. |