Toggle Group

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

<ToggleGroup Type="multiple" Variant="outline">
    <ToggleGroupItem Value="bold" aria-label="Toggle bold">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4">
            <path d="M6 4h8a4 4 0 0 1 0 8H6z" />
            <path d="M6 12h9a4 4 0 0 1 0 8H6z" />
        </svg>
    </ToggleGroupItem>
    <ToggleGroupItem Value="italic" aria-label="Toggle italic">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4">
            <line x1="19" x2="10" y1="4" y2="4" />
            <line x1="14" x2="5" y1="20" y2="20" />
            <line x1="15" x2="9" y1="4" y2="20" />
        </svg>
    </ToggleGroupItem>
    <ToggleGroupItem Value="strikethrough" aria-label="Toggle strikethrough">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4">
            <path d="M6 4v6a6 6 0 0 0 12 0V4" />
            <line x1="4" x2="20" y1="20" y2="20" />
        </svg>
    </ToggleGroupItem>
</ToggleGroup>

Installation

Install the toggle group component using the command or manual steps.

blazor-shadcn add toggle-group

Usage

@using ShadcnBlazor.Components.UI

<ToggleGroup Type="single">
    <ToggleGroupItem Value="a">A</ToggleGroupItem>
    <ToggleGroupItem Value="b">B</ToggleGroupItem>
    <ToggleGroupItem Value="c">C</ToggleGroupItem>
</ToggleGroup>

Examples

Outline

Use Variant="outline" for an outline style.

<ToggleGroup Type="single" Size="sm" Variant="outline" @bind-Value="_outlineValue">
    <ToggleGroupItem Value="all" aria-label="Toggle all">
        All
    </ToggleGroupItem>
    <ToggleGroupItem Value="missed" aria-label="Toggle missed">
        Missed
    </ToggleGroupItem>
</ToggleGroup>

@code {
    private string? _outlineValue = "all";
}

Size

Use the Size parameter to change the size of the toggle group.

<div class="flex flex-col items-center gap-4 py-6">
    <ToggleGroup Type="single" Size="sm" Variant="outline" @bind-Value="_smallSizeValue">
        <ToggleGroupItem Value="top" aria-label="Toggle top">Top</ToggleGroupItem>
        <ToggleGroupItem Value="bottom" aria-label="Toggle bottom">Bottom</ToggleGroupItem>
        <ToggleGroupItem Value="left" aria-label="Toggle left">Left</ToggleGroupItem>
        <ToggleGroupItem Value="right" aria-label="Toggle right">Right</ToggleGroupItem>
    </ToggleGroup>
    <ToggleGroup Type="single" Variant="outline" @bind-Value="_defaultSizeValue">
        <ToggleGroupItem Value="top" aria-label="Toggle top">Top</ToggleGroupItem>
        <ToggleGroupItem Value="bottom" aria-label="Toggle bottom">Bottom</ToggleGroupItem>
        <ToggleGroupItem Value="left" aria-label="Toggle left">Left</ToggleGroupItem>
        <ToggleGroupItem Value="right" aria-label="Toggle right">Right</ToggleGroupItem>
    </ToggleGroup>
</div>

@code {
    private string? _smallSizeValue = "top";
    private string? _defaultSizeValue = "top";
}

Spacing

Use Spacing to add spacing between toggle group items.

<ToggleGroup Type="single" Size="sm" Variant="outline" @bind-Value="_spacingValue" Spacing="2">
    <ToggleGroupItem Value="top" aria-label="Toggle top">Top</ToggleGroupItem>
    <ToggleGroupItem Value="bottom" aria-label="Toggle bottom">Bottom</ToggleGroupItem>
    <ToggleGroupItem Value="left" aria-label="Toggle left">Left</ToggleGroupItem>
    <ToggleGroupItem Value="right" aria-label="Toggle right">Right</ToggleGroupItem>
</ToggleGroup>

@code {
    private string? _spacingValue = "top";
}

Vertical

Use Orientation="vertical" for vertical toggle groups.

<ToggleGroup Type="multiple" Orientation="vertical" Spacing="1" Values="@(new[] { "bold", "italic" })">
    <ToggleGroupItem Value="bold" aria-label="Toggle bold">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4">
            <path d="M6 4h8a4 4 0 0 1 0 8H6z" />
            <path d="M6 12h9a4 4 0 0 1 0 8H6z" />
        </svg>
    </ToggleGroupItem>
    <ToggleGroupItem Value="italic" aria-label="Toggle italic">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4">
            <line x1="19" x2="10" y1="4" y2="4" />
            <line x1="14" x2="5" y1="20" y2="20" />
            <line x1="15" x2="9" y1="4" y2="20" />
        </svg>
    </ToggleGroupItem>
    <ToggleGroupItem Value="underline" aria-label="Toggle underline">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4">
            <path d="M6 4v6a6 6 0 0 0 12 0V4" />
            <line x1="4" x2="20" y1="20" y2="20" />
        </svg>
    </ToggleGroupItem>
</ToggleGroup>

Disabled

<ToggleGroup Type="multiple" Disabled="true">
    <ToggleGroupItem Value="bold" aria-label="Toggle bold">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4">
            <path d="M6 4h8a4 4 0 0 1 0 8H6z" />
            <path d="M6 12h9a4 4 0 0 1 0 8H6z" />
        </svg>
    </ToggleGroupItem>
    <ToggleGroupItem Value="italic" aria-label="Toggle italic">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4">
            <line x1="19" x2="10" y1="4" y2="4" />
            <line x1="14" x2="5" y1="20" y2="20" />
            <line x1="15" x2="9" y1="4" y2="20" />
        </svg>
    </ToggleGroupItem>
    <ToggleGroupItem Value="strikethrough" aria-label="Toggle strikethrough">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4">
            <path d="M6 4v6a6 6 0 0 0 12 0V4" />
            <line x1="4" x2="20" y1="20" y2="20" />
        </svg>
    </ToggleGroupItem>
</ToggleGroup>

Custom

A custom toggle group example.

Font Weight

Use font-normal to set the font weight.

<div class="w-full max-w-[22rem] space-y-4 rounded-xl border bg-card p-4 shadow-sm">
    <div class="space-y-1">
        <p class="text-sm font-medium">Font Weight</p>
    </div>
    <ToggleGroup Type="single" Variant="outline" Spacing="2" Size="lg" @bind-Value="_fontWeight">
        <ToggleGroupItem Value="light" Class="!size-16 !px-0 flex flex-col items-center justify-center rounded-xl">
            <span class="text-2xl leading-none font-light">Aa</span>
            <span class="text-muted-foreground text-xs">Light</span>
        </ToggleGroupItem>
        <ToggleGroupItem Value="normal" Class="!size-16 !px-0 flex flex-col items-center justify-center rounded-xl">
            <span class="text-2xl leading-none font-normal">Aa</span>
            <span class="text-muted-foreground text-xs">Normal</span>
        </ToggleGroupItem>
        <ToggleGroupItem Value="medium" Class="!size-16 !px-0 flex flex-col items-center justify-center rounded-xl">
            <span class="text-2xl leading-none font-medium">Aa</span>
            <span class="text-muted-foreground text-xs">Medium</span>
        </ToggleGroupItem>
        <ToggleGroupItem Value="bold" Class="!size-16 !px-0 flex flex-col items-center justify-center rounded-xl">
            <span class="text-2xl leading-none font-bold">Aa</span>
            <span class="text-muted-foreground text-xs">Bold</span>
        </ToggleGroupItem>
    </ToggleGroup>
    <p class="text-muted-foreground text-sm">
        Use <code>font-@_fontWeight</code> to set the font weight.
    </p>
</div>

@code {
    private string? _fontWeight = "normal";
}

API Reference

ToggleGroup

Prop	Type	Default
Type	`single \| multiple`	single
Value	`string?`	null
Values	`IEnumerable<string>?`	null
Variant	`default \| outline`	default
Size	`default \| sm \| lg`	default
Orientation	`horizontal \| vertical`	horizontal
Spacing	`int`	1
Disabled	`bool`	false

ToggleGroupItem

Prop	Type	Default
Value	`string`	required
Disabled	`bool`	false
Class	`string?`	null

On This Page

Installation Usage Examples Outline Size Spacing Vertical Disabled Custom API Reference