Blazorise Switch component

Switch is used for switching between two opposing states.

The <Switch> component provides users the ability to choose between two distinct values. These are very similar to a toggle, or on/off switch, though aesthetically different than a checkbox.

Switches are the preferred way to adjust settings on mobile. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.

Examples

Basic

<Switch TValue="bool">Remember me</Switch>

Binding

Two-way binding

<Switch TValue="bool" @bind-Value="@rememberMe">Remember Me</Switch>

@code{
    bool rememberMe;
}

Manual event binding

<Switch TValue="bool" Value="@rememberMe" ValueChanged="@OnRememberMeChanged">Remember Me</Switch>

@code{
    bool rememberMe;

    Task OnRememberMeChanged( bool value )
    {
        rememberMe = value;

        return Task.CompletedTask;
    }
}

Best Practices

Immediate Settings

A switch represents a setting that takes effect immediately. Use a Check when the value is submitted with a form or records agreement. Write a positive label that describes the enabled state, such as "Show notifications," and make the current state understandable without relying on color alone.

Communicate Asynchronous Changes

When changing the setting requires asynchronous work, show progress and prevent repeated changes while the request is active. If the operation fails, restore the previous value and explain why the new state could not be saved.

Saved
<Fields>
    <Field>
        <Div Display="Display.Flex" Flex="Flex.AlignItems.Center" Gap="Gap.Is3">
            <Switch TValue="bool" Value="@notificationsEnabled" ValueChanged="@SaveSettingAsync" Disabled="@isSaving">
                Email notifications
            </Switch>
            @if ( !string.IsNullOrWhiteSpace( statusMessage ) )
            {
                <Span TextColor="@StatusTextColor" role="status" aria-live="polite">@statusMessage</Span>
            }
        </Div>
    </Field>
    <Field>
        <Check TValue="bool" @bind-Value="@simulateFailure" Disabled="@isSaving">Simulate next save failure</Check>
    </Field>
</Fields>

@if ( !string.IsNullOrWhiteSpace( errorMessage ) )
{
    <Alert Color="Color.Danger" Visible Margin="Margin.Is3.FromTop">
        <AlertDescription>@errorMessage</AlertDescription>
    </Alert>
}

@code {
    private bool notificationsEnabled = true;
    private bool simulateFailure;
    private bool isSaving;
    private string statusMessage = "Saved";
    private string errorMessage;

    private TextColor StatusTextColor
        => isSaving
            ? TextColor.Secondary
            : errorMessage is null
                ? TextColor.Success
                : TextColor.Danger;

    private async Task SaveSettingAsync( bool value )
    {
        bool previousValue = notificationsEnabled;
        bool shouldFail = simulateFailure;

        notificationsEnabled = value;
        simulateFailure = false;
        isSaving = true;
        statusMessage = "Saving...";
        errorMessage = null;

        try
        {
            await Task.Delay( 800 );

            if ( shouldFail )
            {
                throw new InvalidOperationException();
            }

            statusMessage = "Saved";
        }
        catch ( InvalidOperationException )
        {
            notificationsEnabled = previousValue;
            statusMessage = "Not saved";
            errorMessage = "The setting could not be saved. The previous value was restored.";
        }
        finally
        {
            isSaving = false;
        }
    }
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page