Components / Toggle Group

Toggle Group

A set of two-state buttons that can be toggled on or off, with single (radio-like) or multiple selection. Roving arrow-key focus and data-pressed styling come from the brain; this preview is the real component running in WebAssembly.

Examples

bold

razor
<ZitsToggleGroup Type="multiple" Variant="outline" @bind-Value="_marks">
    <ZitsToggleGroupItem Value="bold" aria-label="Toggle bold">
        <BoldIcon />
    </ZitsToggleGroupItem>
    <ZitsToggleGroupItem Value="italic" aria-label="Toggle italic">
        <ItalicIcon />
    </ZitsToggleGroupItem>
    <ZitsToggleGroupItem Value="underline" aria-label="Toggle underline">
        <UnderlineIcon />
    </ZitsToggleGroupItem>
</ZitsToggleGroup>

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

Installation

Terminal bash
navius add toggle-group

API reference

Prop Type Default
Type string "single" | "multiple"
Value IReadOnlyList<string>? -
DefaultValue IReadOnlyList<string>? -
Disabled bool false
Orientation string "horizontal"
RovingFocus bool true
Loop bool true
Variant string "default" | "outline"
Size string "default" | "sm" | "lg"
ChildContent RenderFragment? -

ZitsToggleGroupItem

Prop Type Default
Value string ""
Disabled bool false
Variant string? inherits group
Size string? inherits group
ChildContent RenderFragment? -