Toggle Group

Overview

ToggleGroup composes the headless NaviusToggleGroup primitive family, which owns roving focus and single/multiple selection. ZitsToggleGroup cascades a ZitsToggleGroupVariant (its Variant/Size) to every ZitsToggleGroupItem, which an item can override locally.

Discrepancy: the docs site’s example code (ToggleGroupPage.razor) uses Type="multiple", but ZitsToggleGroup.razor has no Type parameter; multi-select is a bool Multiple parameter (default false). This manifest follows the component source.

Install

navius add toggle-group --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsToggleGroup Multiple="true" Variant="outline" @bind-Value="_marks">
    <ZitsToggleGroupItem Value="bold" aria-label="Toggle bold">B</ZitsToggleGroupItem>
    <ZitsToggleGroupItem Value="italic" aria-label="Toggle italic">I</ZitsToggleGroupItem>
</ZitsToggleGroup>

@code {
    private IReadOnlyList<string> _marks = new[] { "bold" };
}

Parts and props

ZitsToggleGroup’s Value, ValueChanged, DefaultValue, Disabled, Orientation, RovingFocus, Loop, and Dir pass through to NaviusToggleGroup unchanged. ZitsToggleGroupItem’s Value/Disabled pass through to NaviusToggleGroupItem unchanged. The styled wrapper adds:

Prop	Type	Default	Description
ZitsToggleGroup.Multiple	bool	false	When true, multiple items can be pressed at once; default is single (radio-like) selection.
ZitsToggleGroup.Variant	string	"default"	default | outline. Cascades to every item unless the item overrides it.
ZitsToggleGroup.Size	string	"default"	default | sm | lg. Cascades to every item unless the item overrides it.
ZitsToggleGroupItem.Variant	string?	null	Overrides the group’s cascaded variant when set.
ZitsToggleGroupItem.Size	string?	null	Overrides the group’s cascaded size when set.

Styling surface

Attributes on both parts is merged with their preset class set via Cn.Merge, caller classes applied last.

Parameter	Values
Variant	default · outline
Size	default · sm · lg

Data attribute hooks

Part	Attribute	Description
Item	data-pressed	Set on a pressed item, emitted by the composed NaviusToggleGroupItem primitive; styled with data-[pressed]:bg-accent data-[pressed]:text-accent-foreground.

Underlying primitives

• NaviusToggleGroup