In part, we are going to learn how to create a checkbox with a blazor.
If you are new to Blazor then you must see
- PART 1 :- What is Blazor
- PART 2 :- How To Create Blazor Server Application
- PART 3 :- How To Create DropdownList in Blazor
- PART 4 :- How To Create Radio Buttons in Blazor
Here we have Already Created an Application with the name BlazorPlayGround1.
Complete Source Code on Github
Below is a Snapshot of the Application that we have created

Adding ViewModel Folder
Adding the ViewModel folder to the project.

Adding ViewModel
Adding ViewModel with the class name CheckboxViewModel , which will have bool property in it.
namespace BlazorPlayGround1.ViewModel
{
public class CheckboxViewModel
{
public bool Status { get; set; }
}
}
Next, the step we are going to add Component.
Adding Component
We are going to add a Component with the name CheckboxComponent.razor.

Adding Base Class for CheckboxComponent Component
We will add a class with the name CheckboxComponentBase, and then we will inherit it with ComponentBase.


Next, we are going to add the CheckboxViewModel property in the CheckboxComponentBase component.
using BlazorPlayGround1.ViewModel;
using Microsoft.AspNetCore.Components;
namespace BlazorPlayGround1.Pages
{
public class CheckboxComponentBase : ComponentBase
{
protected CheckboxViewModel CheckboxViewModel { get; set; } = new CheckboxViewModel();
}
}
After adding in the Next step, we will set the checkbox property in the OnInitialized method.
INITIALIZING STATUS IN ONINITIALIZED METHOD
using BlazorPlayGround1.ViewModel;
using Microsoft.AspNetCore.Components;
namespace BlazorPlayGround1.Pages
{
public class CheckboxComponentBase : ComponentBase
{
public CheckboxViewModel CheckboxViewModel { get; set; } = new CheckboxViewModel();
protected override void OnInitialized()
{
CheckboxViewModel.Status = true;
}
protected async void FormSubmitted()
{
}
}
}
SETTING UP CHECKBOXCOMPONENT.RAZOR PAGE
In this part, we will work on CheckboxComponent.razor page, which we have added earlier.
- Going to add the @page Razor directive and specify the route for Component (CheckboxExample)
- Adding @inherits directive and set base class for Component (CheckboxComponentBase).
- Adding Edit form which Renders a form element and set Model and OnValidSubmit Properties of it.
- Adding InputCheckbox and setting @bind-Value=” CheckboxViewModel.Status“.
- At last, we will show the label based on the checkbox selected value CheckboxViewModel.Status.
CHECKBOXCOMPONENT.RAZOR PAGE
@page "/CheckboxExample"
@inherits CheckboxComponentBase
<EditForm Model="@CheckboxViewModel" OnValidSubmit="@FormSubmitted">
<div class="card">
<div class="card-header">
<h5 class="card-title">Checkbox</h5>
</div>
<div class="card-body">
<div class="form-group col-md-4">
<label for="Status">Status: </label>
<InputCheckbox @bind-Value="CheckboxViewModel.Status" />
</div>
</div>
<div class="card-footer">
@if (CheckboxViewModel.Status)
{
<label> Selected Value :- </label> <label>True</label>
}
else
{
<label> Selected Value :- </label> <label>False</label>
}
</div>
</div>
</EditForm>
