Blazor Switch
Use the Blazor Bootstrap Switch component to show the consistent cross-browser and cross-device custom checkboxes.
Basic usage#
<Switch @bind-Value="agree1" Label="Default switch checkbox input" />
<Switch @bind-Value="agree2" Label="Checked switch checkbox input" />
<div class="mt-3">Switch 1 Status: <b>@agree1</b></div>
<div>Switch 2 Status: <b>@agree2</b></div>
@code {
bool agree1;
bool agree2 = true;
}
Disable#
Use the Disabled parameter to disable the Switch.
<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.
<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.
<Switch @bind-Value="agree" Label="Reverse switch checkbox input" Reverse="true" />
@code {
bool agree;
}
Events: ValueChanged#
This event fired when the Switch selection changed.
<Switch Class="mt-3" Value="agree" Label="Default switch checkbox input" ValueExpression="() => agree" ValueChanged="SwitchChanged" />
<div class="mt-3">@displaySwitchStatus</div>
<Button Color="ButtonColor.Primary" @onclick="ToggleSwitch"> Toggle Switch </Button>
@code {
private bool agree;
private string displaySwitchStatus = default!;
private void SwitchChanged(bool value)
{
agree = value; // this is mandatory
displaySwitchStatus = $"Switch Status: {value}, changed at {DateTime.Now.ToLocalTime()}.";
}
private void ToggleSwitch() => agree = !agree;
}
@using System.ComponentModel.DataAnnotations
<style>
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
</style>
<EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit">
<DataAnnotationsValidator />
<div class="form-group row mb-3">
<label class="col-md-2 col-form-label">First name: <span class="text-danger">*</span></label>
<div class="col-md-10">
<InputText class="form-control" @bind-Value="employee.FirstName" Placeholder="Enter first name" />
<ValidationMessage For="@(() => employee.FirstName)" />
</div>
</div>
<div class="form-group row mb-3">
<label class="col-md-2 col-form-label">Last name: <span class="text-danger">*</span></label>
<div class="col-md-10">
<InputText class="form-control" @bind-Value="employee.LastName" Placeholder="Enter last name" />
<ValidationMessage For="@(() => employee.LastName)" />
</div>
</div>
<div class="form-group row mb-3">
<label class="col-md-2 col-form-label">Active</label>
<div class="col-md-10">
<Switch Class="mt-2" @bind-Value="employee.IsActive" />
</div>
</div>
<div class="row">
<div class="col-md-12 text-right">
<Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
<Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2" Disabled="disableSave">Save</Button>
</div>
</div>
</EditForm>
@code {
private bool disableSave;
private Employee employee = new();
private EditContext? editContext;
[Inject] private ToastService ToastService { get; set; } = default!;
protected override void OnInitialized()
{
employee = new() { FirstName = "Vikram Reddy", LastName = "Gaddam", IsActive = true };
editContext = new EditContext(employee);
editContext.OnFieldChanged += HandleFieldChanged!;
base.OnInitialized();
}
public void HandleOnValidSubmit()
{
disableSave = !(editContext?.Validate() ?? false);
var toastMessage = new ToastMessage
{
Title = "Save Employee Details",
Message = $"Employee details saved successfully.",
AutoHide = true,
Type = ToastType.Success,
IconName = IconName.CheckCircleFill,
};
ToastService.Notify(toastMessage);
}
private void HandleFieldChanged(object sender, FieldChangedEventArgs e)
{
disableSave = !(editContext?.Validate() ?? false);
var toastMessage = new ToastMessage
{
Title = "Field Changed Notification",
Message = $"The field \"{e.FieldIdentifier.FieldName}\" was changed.",
AutoHide = true,
Type = ToastType.Info
};
ToastService.Notify(toastMessage);
}
private void ResetForm()
{
employee = new();
editContext = new EditContext(employee);
editContext.OnFieldChanged += HandleFieldChanged!;
}
public class Employee
{
[Required(ErrorMessage = "First name required.")]
public string? FirstName { get; set; }
[Required(ErrorMessage = "Last name required.")]
public string? LastName { get; set; }
public bool IsActive { get; set; }
}
}
Blazor Bootstrap