Blazor Switch

Use the Blazor Bootstrap Switch component to show the consistent cross-browser and cross-device custom checkboxes.

Basic usage#

Disable#

Use the Disabled parameter to disable the Switch.
razor
<div class="mb-3">
    <Switch @bind-Value="agree" Disabled="@disabled" Label="Disabled switch checkbox input" />
</div>

<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>

@code {
    private bool agree = true;
    private bool disabled = true;

    private void Enable() => disabled = false;

    private void Disable() => disabled = true;

    private void Toggle() => disabled = !disabled;
}
Also, use Enable() and Disable() methods to enable and disable the Switch.
NOTE
Do not use both the Disabled parameter and Enable() & Disable() methods.
razor
<div class="mb-3">
    <Switch @ref="switch1" @bind-Value="agree" Label="Disabled switch checkbox input" />
</div>

<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>

@code {
    private Switch switch1 = default!;
    private bool agree = true;

    private void Disable() => switch1.Disable();

    private void Enable() => switch1.Enable();
}

Reverse#

Put your switches on the opposite side by using the Reverse parameter.

Events: ValueChanged#

This event fired when the Switch selection changed.

Form#