Blazor Checkbox Overview
The Blazor Checkbox component allows you to add more customizable checkboxes to your application. It maintains the behavior of the standard HTML checkbox and provides checked, unchecked and indeterminate states.
The Checkbox component is part of Telerik UI for Blazor, a
professional grade UI library with 100+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor Checkbox
Add the
TelerikCheckBoxtag to a Razor file.Set the
Valueparameter to aboolobject. It supports one-way and two-way binding.(optional) Set the
Idparameter to attach a<label>to the checkbox.
Basic setup of the Telerik CheckBox using two-way data binding.
@*Basic setup of the Telerik CheckBox Component*@
<TelerikCheckBox Id="myCheckBox" @bind-Value="@isSelected" />
<label for="myCheckBox">@( isSelected ? "Selected" : "Not selected" )</label>
@code {
private bool isSelected { get; set; }
}
Indeterminate State
In addition to basic checked and unchecked states, the Blazor CheckBox has a third state - indeterminate. Read more about the Blazor Checkbox indeterminate state.
Appearance
The Checkbox component provides size and border settings to control its appearance. Read more about the Blazor Checkbox appearance settings.
Events
The Blazor Checkbox fires value change, focus and state change events that you can handle and further customize its behavior. Read more about the Blazor Checkbox events.
Checkbox Parameters
The Blazor CheckBox provides various parameters that allow you to configure the component:
| Parameter | Type | Description |
|---|---|---|
Class |
string |
Renders a custom CSS class to the <input class="k-checkbox"> element. |
Enabled |
bool |
Whether the component is enabled. |
Id |
string |
Renders as the id attribute on the <input /> element, so you can attach a <label for=""> to it. |
Indeterminate |
bool |
Puts the CheckBox in its third state - Indeterminate. See the Indeterminate state article for more information and examples. |
TabIndex |
Nullable<int> |
The tabindex attribute rendered on the CheckBox. |
Value |
bool |
Mapped to the Checked property of the normal HTML checkbox. |
See also the Input Validation article.
Common Example
Example that showcases the "I agree to the terms and conditions" basic scenario.
@if (hasAgreed)
{
<div class="alert alert-success w-50">
Thank you for agreeing to our terms and conditions!
</div>
}
else
{
<p class="w-50 text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi lectus, ultrices sed libero et, tempor rutrum mauris. Praesent sit amet suscipit leo, ut hendrerit lacus. Mauris posuere, mi in elementum pretium, sem elit maximus mauris, ac tempus turpis nunc sed orci. Nunc velit lacus, rutrum et dui mattis, condimentum fermentum velit. Pellentesque et elit rhoncus, sodales nibh ac, faucibus tellus. Vestibulum vitae tempor tellus. Sed maximus sem quis est posuere, efficitur porttitor augue tincidunt. Sed viverra dapibus ullamcorper. Vestibulum ex arcu, molestie sed quam vulputate, aliquet cursus lectus. Aenean sollicitudin condimentum fringilla. Integer arcu justo, sollicitudin ut libero ut, posuere finibus sapien. Suspendisse hendrerit convallis urna.
Donec eu sodales dui, et consequat massa. Integer vitae euismod dui, id rhoncus tellus. Ut luctus leo eget sapien eleifend facilisis. Duis sed maximus tortor. Ut nunc nibh, pulvinar a enim eget, mattis sagittis sem. Mauris odio nibh, aliquet a erat sit amet.
</p>
}
<TelerikCheckBox Id="myCheckBox" @bind-Value="@hasAgreed" />
<label for="myCheckBox">I agree to the terms and conditions</label>
@code {
private bool hasAgreed { get; set; }
}