ToggleGroupField

Labelled toggle-group field — wraps the ToggleGroup primitive with a label above and one button per option

Interactive-mode

Examples

Default toggle group field (icon options)

Text alignment

Toggle group field with help text, error state, and icon options

Priority*

Please select a priority level.

API

The element family below can be composed together. Click an element to jump to its properties.

Element	Purpose
ToggleGroupField	A labelled toggle-group field chunk. Renders a `FormLabel` above a horizontal `ToggleGroup` with one `ToggleGroupItem` per option. When an option provides `IconSvg`, the icon is rendered inside the button instead of the label string — ideal for icon-only toolbars such as alignment or formatting selectors. Wraps the `ToggleGroup` and `ToggleGroupItem` primitives.
ToggleGroupField.ToggleGroupOption	Record describing a single option in the toggle group.

ToggleGroupField

A labelled toggle-group field chunk. Renders a FormLabel above a horizontal ToggleGroup with one ToggleGroupItem per option. When an option provides IconSvg, the icon is rendered inside the button instead of the label string — ideal for icon-only toolbars such as alignment or formatting selectors. Wraps the ToggleGroup and ToggleGroupItem primitives.

Property	Type	Description
Label	string?	Label text rendered above the toggle group via `FormLabel`. Omit to hide the label.
HelpText	string?	Helper text rendered below the group. Shown in `text-danger-fg` when `Error` is true, otherwise `text-muted-foreground`.
Error	bool	Applies error styling to the label and help text. Default: `false`.
Required	bool	Appends a red asterisk to the label via `FormLabel`. Default: `false`.
Disabled	bool	Disables the underlying toggle group. Default: `false`.
Id	string	HTML `id` — auto-generated by default.
Value	string?	Currently active option value. Use `@bind-Value` for two-way binding.
ValueChanged	EventCallback<string?>	Fires when the active value changes. Part of the `@bind-Value` pair.
Options	IList<ToggleGroupField.ToggleGroupOption>?	The list of toggle options to render. Each option is a record with `Value`, `Label`, and an optional `IconSvg` property.
Gap	Size	Inter-button spacing on the underlying `ToggleGroup`. Mapped through `SizeClasses.Gap` (e.g. `Size.Xs` → `gap-2`, `Size.Sm` → `gap-3`). Default: `Size.Xs3`.

ToggleGroupField.ToggleGroupOption

Record describing a single option in the toggle group.

Property	Type	Description
Value	string	The value emitted when this option is selected. Matched against `ToggleGroupField.Value`.
Label	string	Display label. Rendered as the button text when `IconSvg` is null.
IconSvg	string?	Optional SVG path (e.g. `IconSvg.FormatAlignLeft`). When provided, renders `<Icon Svg="..." ClassName="size-4" />` inside the button instead of the label string.