Blazor Switch

Create consistent cross-browser and cross-device checkboxes with our blazor switches. A switch has the markup of a custom checkbox.

Basic usage #

Default switch checkbox input

Checked switch checkbox input

Switch 1 Status: False

Switch 2 Status: True

<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.

Disabled switch checkbox input

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.

Disabled switch checkbox input

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.

Reverse switch checkbox input

<Switch @bind-Value="agree" Label="Reverse switch checkbox input" Reverse="true" />

@code {
    bool agree;
}

Events: ValueChanged #

This event fired when the Switch selection changed.

Default switch checkbox input

<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;
}

Form #

@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; }
    }
}

If you like Blazor Bootstrap, give it a star on GitHub!

Blazor Switch

Basic usage #

Disable #

Reverse #

Events: ValueChanged #

Form #

Links

Guides

Community