Components / Toggle Group

Toggle Group

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

razor

<NaviusToggleGroup Multiple="true" @bind-Value="_value"
                   class="inline-flex gap-1 rounded-md border p-1">
    <NaviusToggleGroupItem Value="bold" aria-label="Bold"
                           class="... data-[pressed]:bg-accent">B</NaviusToggleGroupItem>
    <NaviusToggleGroupItem Value="italic" aria-label="Italic"
                           class="... data-[pressed]:bg-accent">I</NaviusToggleGroupItem>
    <NaviusToggleGroupItem Value="underline" aria-label="Underline"
                           class="... data-[pressed]:bg-accent">U</NaviusToggleGroupItem>
</NaviusToggleGroup>

@code { private IReadOnlyList<string> _value = new List<string> { "bold" }; }

Features

Single (default) or multiple (Multiple="true") pressed values.
Can be controlled (@bind-Value) or uncontrolled (DefaultValue).
Roving tabindex: the group is a single Tab stop and arrow keys move focus between items.
Horizontal or vertical orientation drives the arrow-key axis.
Full keyboard navigation with optional wrapping (Loop).
RTL aware: horizontal arrow semantics swap under Dir="rtl".

Installation

Reference the Navius.Primitives package for the headless primitive, or vendor a styled version with the CLI: navius add copies the styled zits/ui component plus the brain files it depends on.

Terminal bash

navius add toggle-group

Anatomy

Import the parts and assemble them.

razor

@using Navius.Primitives.Components.ToggleGroup

<NaviusToggleGroup>
    <NaviusToggleGroupItem Value="a" />
    <NaviusToggleGroupItem Value="b" />
    <NaviusToggleGroupItem Value="c" />
</NaviusToggleGroup>

API Reference

Root

Contains all the parts of a toggle group. Renders a div with role=group.

Prop	Type	Default
Multiple	bool	false
Value	IReadOnlyList<string>?	-
ValueChanged	EventCallback<IReadOnlyList<string>>	-
DefaultValue	IReadOnlyList<string>?	-
Disabled	bool	false
Orientation	string	"horizontal"
RovingFocus	bool	true
Loop	bool	true
Dir	string?	-
ChildContent	RenderFragment?	-
Attributes	IDictionary<string, object>?	-

Data attributes

Data attribute	Values
[data-orientation]	"horizontal" \| "vertical"
[data-multiple]	Present in multiple-selection mode
[data-disabled]	Present when disabled

Item

An individual two-state toggle button within the group. Renders a button.

Prop	Type	Default
Value	string	""
Disabled	bool	false
ChildContent	RenderFragment?	-
Attributes	IDictionary<string, object>?	-

Data attributes

Data attribute	Values
[data-pressed]	Present when the item is pressed (on)
[data-disabled]	Present when disabled

Accessibility

Uses roving tabindex to manage focus, implementing the roles and keyboard map of the toolbar WAI-ARIA APG pattern. Behavior is covered by the browser test suite and an axe-core WCAG gate in CI.

Keyboard interactions

Key	Description
`Tab`	Moves focus into and out of the group (a single Tab stop).
`Space`	Toggles the focused item on or off.
`Enter`	Toggles the focused item on or off.
`ArrowDown`	Moves focus to the next item (vertical orientation).
`ArrowUp`	Moves focus to the previous item (vertical orientation).
`ArrowRight`	Moves focus to the next item (horizontal orientation).
`ArrowLeft`	Moves focus to the previous item (horizontal orientation).
`Home`	Moves focus to the first item.
`End`	Moves focus to the last item.