Forms

TwSwitch

TwSwitch is a Blazor toggle switch component for on and off settings. Bind Value and set Color, Name, and disabled or readonly states.

Last updated 24 September 2026

Basic Usage

A toggle switch for binary on/off state, bound with @bind-Value.

Notifications

Notifications are on

Razor

<TwSwitch @bind-Value="notificationsEnabled" Label="Notifications" AriaLabel="Toggle notifications" />
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Notifications are <strong>@(notificationsEnabled ? "on" : "off")</strong></p>

CSHARP

@code {
    private bool notificationsEnabled = true;
}

Colors

Use Color to give a switch meaning at a glance - here each toggle drives an independent, bound setting.

Primary

Accent

Success

Danger

Warning

Info

Light

Dark

Razor

@foreach (Color c in ((Color[])Enum.GetValues(typeof(Color))).Take(10))
{
    @if (c != Color.Light && c != Color.Dark)
    {
        <div class="block mt-4">
            <div class="p-3">
                <TwSwitch @bind-Value="exampleSwitch" Label="@c.ToString()" Color="@c" AriaLabel="@($"{@c.ToString()} switch")" />
            </div>
        </div>
    }
    else
    {
        <div class="block mt-4">
            <div class="@(c == Color.Light ? "bg-gray-900 p-3 rounded-lg" : "bg-white p-3 rounded-lg")">
                <TwSwitch @bind-Value="exampleSwitch" Label="@c.ToString()" Color="@c" LabelClass="@(c == Color.Light ? "text-white dark:text-white" : "text-gray-900 dark:text-gray-900")" AriaLabel="@($"{@c.ToString()} switch")" />
            </div>
        </div>
    }
}

Disabled & Readonly

Disabled dims and locks the switch; ReadOnly keeps its state and color but blocks changes.

Disabled Switch

Readonly Switch

Razor

<div class="space-y-3">
    <TwSwitch @bind-Value="disabledValue" Label="Disabled Switch" Disabled Color="Color.Primary" AriaLabel="Disabled switch" />
    <TwSwitch @bind-Value="readonlyValue" Label="Readonly Switch" ReadOnly Color="Color.Primary" AriaLabel="Readonly switch" />
</div>

CSHARP

@code {
    private bool disabledValue = false;
    private bool readonlyValue = true;
}

Settings Panel

A practical example - each switch binds to its own field, and a summary below reflects the combined state.

Email notifications

SMS notifications

Marketing emails

Active settings:

Email notifications

Razor

<div class="space-y-3">
    <TwSwitch @bind-Value="emailNotifications" Label="Email notifications" AriaLabel="Toggle email notifications" />
    <TwSwitch @bind-Value="smsNotifications" Label="SMS notifications" AriaLabel="Toggle SMS notifications" />
    <TwSwitch @bind-Value="marketingEmails" Label="Marketing emails" AriaLabel="Toggle marketing emails" />
</div>

<div class="mt-4 p-3 rounded border border-gray-200 dark:border-gray-600">
    <p class="text-sm text-gray-600 dark:text-gray-400">Active settings:</p>
    @if (activeSettings.Count > 0)
    {
        <ul class="mt-1 text-sm list-disc list-inside">
            @foreach (var setting in activeSettings)
            {
                <li>@setting</li>
            }
        </ul>
    }
    else
    {
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400 italic">None enabled</p>
    }
</div>

CSHARP

@code {
    private bool emailNotifications = true;
    private bool smsNotifications = false;
    private bool marketingEmails = false;
    
    private List<string> activeSettings
    {
        get
        {
            var settings = new List<string>();
            if (emailNotifications) settings.Add("Email notifications");
            if (smsNotifications) settings.Add("SMS notifications");
            if (marketingEmails) settings.Add("Marketing emails");
            return settings;
        }
    }
}

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwSwitchTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Switch`	string
`Track`	string
`WrapperSize`	string
`Base`	string
`LabelBase`	string
`LabelInteractiveCursor`	string
`LabelNonInteractiveCursor`	string
`LabelDisabled`	string

Global Theme Configuration

These reuse shared design tokens configured once on TwBlazorTheme, rather than being unique to this component.

Property	Type	Controls
`Colors`	TwBlazorPalette

Full reference: TwSwitchTheme on the API docs.