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 60+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
To use a Telerik Checkbox for Blazor
- add the
TelerikCheckBox
tag - provide
Value
(one-way data binding) orbind-Value
(two-way data binding) property
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; }
}
Features
The CheckBox provides the following features:
-
Class
- the CSS class that will be rendered on the main wrapping element of the CheckBox. -
Enabled
- whether the component is enabled. -
Id
- renders as theid
attribute on the<input />
element, so you can attach a<label for="">
to it. -
TabIndex
- thetabindex
attribute rendered on the CheckBox. -
Value
andbind-Value
- mapped to theChecked
property of the normal HTML checkbox- The
Value
andbind-Value
acceptbool
andbool?
types
- The
-
Indeterminate
andbind-Indeterminate
- see the Indeterminate state article for more information and examples - Events - see the CheckBox events article for more information and examples.
- Validation - see the Input Validation article for more details.
Examples
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; }
}
The result from the code snippet above