Toggle buttons

ToggleButtonControl · ButtonGroupControl

A button that stays pressed, and a group that picks one value or many.

Overview

ToggleButtonControl is a ButtonControl with a pressed state: Selected binds two ways and the button reports aria-pressed. ButtonGroupControl lines up several such buttons from a list of SelectionItems and keeps the selection for you: one value or many, horizontal or vertical, with Arrow, Home and End moving focus between them.

Examples

#Toggle button

@bind-Selected holds the state. Icon-only toggles need Title and aria-label. Enabled="false" disables; there is no Disabled parameter on this control.

Example

Razor

Format: none

#Button group

Selection="Single" replaces the selection; Multiple toggles each value. Orientation="Vertical" stacks the buttons. AllowEmpty lets the last value go; a disabled item stays in place and is skipped by the arrow keys.

Example

Razor

left

mon, tue, wed, thu, fri

Documentation

ToggleButtonControl parameters

Parameter	Type	Default	Description
`Selected`	`bool`	`false`	Pressed state. Two-way with `@bind-Selected`.
`SelectedChanged`	`EventCallback<bool>`	—	Fires after each toggle with the new state.
`ChildContent`	`RenderFragment?`	—	Label or any markup.
`IconCss`	`string?`	`null`	Leading icon.
`OnClick`	`EventCallback<MouseEventArgs>`	—	Fires after the toggle and after `SelectedChanged`.
`Enabled (base)`	`bool`	`true`	false disables the button. There is no `Disabled` parameter.
`Title (base)`	`string?`	`null`	Native tooltip. Required on icon-only toggles.
`CssClass / Style (base)`	`string?`	`null`	Appended to the inner button's classes; inline style.
`(unmatched attributes)`	`Dictionary<string,object>`	—	Forwarded to the inner `<button>`: `aria-`, `data-`, `id`.

ButtonGroupControl parameters

Parameter	Type	Default	Description
`Items`	`IReadOnlyList<SelectionItem>`	`empty`	Buttons, in order. Values must be unique or the control throws.
`Values`	`IReadOnlyList<string>`	`empty`	Selected values. Two-way with `@bind-Values`.
`ValuesChanged`	`EventCallback<IReadOnlyList<string>>`	—	Fires after each change with the full selection.
`Selection`	`ChoiceSelectionMode`	`Single`	`Single` replaces the selection; `Multiple` toggles the value.
`Orientation`	`FlexOrientation`	`Horizontal`	`Horizontal` or `Vertical`.
`AllowEmpty`	`bool`	`false`	When false the last selected value cannot be cleared.
`AriaLabel`	`string`	`"Button group"`	Accessible name of the group.
`Enabled (base)`	`bool`	`true`	false disables every button.
`Visible (base)`	`bool`	`true`	false renders nothing.
`CssClass / Style (base)`	`string?`	`null`	On the group element.

SelectionItem

Property	Type	Default	Description
`Value`	`string`	—	Key reported in `Values`. Unique within the group.
`Text`	`string`	—	Label. Empty for icon-only buttons.
`Disabled`	`bool`	`false`	Rendered disabled and skipped by the arrow keys.
`IconCss`	`string?`	`null`	Leading icon.
`ctor`		—	`new(value, text, disabled, iconCss)`; it is a positional record.

Methods

Method	Inputs	Returns	Description
`ButtonGroupControl.SelectAsync()`	`value`	`Task`	Same as a click on that button: applies the current mode and raises `ValuesChanged`. Ignored when disabled or unknown.

CSS classes

Class	Effect
`fx-toggle-button · .selected`	The toggle's button; `selected` fills it with the accent color and an inset shadow.
`fx-button-group · .vertical`	Inline flex row of buttons with no gap; `vertical` stacks them.
`fx-selected`	A selected button inside a group: accent fill, white text.
`fx-button-group button`	Square corners, 28px minimum height, 2px focus ring on keyboard focus.

CSS variables

Variable	Fallback	Purpose
`--fx-accent`	`#1c6ebf (toggle) · #2465b9 (group)`	Pressed fill. The two stylesheets fall back to different blues.
`--fx-btn-*`	`—`	Resting look, inherited from ButtonControl. See Buttons.

Keyboard and accessibility

Both render ButtonControl, so every button is a native <button>: Space and Enter toggle it.
Every button carries aria-pressed. The group has role="group" and the AriaLabel text.
In a group, Arrow Right or Down moves focus to the next button, Arrow Left or Up to the previous, Home and End to the first and last. Focus wraps and skips disabled items. Arrows move focus only; Space or Enter selects.
Icon-only toggles need Title plus aria-label.