Toggle Component

On and off states

<Toggle Size="md" />
<Toggle Size="md" Value="true" />

With label and description

Dark modeSwitch between light and dark themes. Auto-saveAutomatically save changes as you work.

<Toggle Size="md"
        Label="Dark mode"
        Description="Switch between light and dark themes." />

<Toggle Size="md"
        Value="true"
        Label="Auto-save"
        Description="Automatically save changes as you work." />

Sizes

Small toggle Medium toggle

<Toggle Size="sm" Value="true" Label="Small toggle" />
<Toggle Size="md" Value="true" Label="Medium toggle" />

Disabled

Disabled (off) Disabled (on)

<Toggle Size="md" Disabled="true" Label="Disabled (off)" />
<Toggle Size="md" Value="true" Disabled="true" Label="Disabled (on)" />

Interactive (two-way bind)

Toggle is OFF Toggle is ON

<Toggle @bind-Value="toggle1" Size="sm" Label="@label1" />
<Toggle @bind-Value="toggle2" Size="md" Label="@label2" />

@code {
    private bool toggle1;
    private bool toggle2 = true;
    private string label1 => $"Toggle is {(toggle1 ? "ON" : "OFF")}";
    private string label2 => $"Toggle is {(toggle2 ? "ON" : "OFF")}";
}