navius

Components / Toggle Group

Toggle Group

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

razor
<NaviusToggleGroup Type="multiple" @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 (Type="single") or multiple (Type="multiple") 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

Install the brain, or copy just this primitive in with the CLI.

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
Type string "single"
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? -

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? -

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, following the toolbar WAI-ARIA design pattern.

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.