CheckBox Appearance

As of the R1 2022 release, the CheckBox uses a brand new rendering.

In this article, you will find information about the new appearance of the Telerik UI for ASP.NET MVC CheckBox.

For additional information regarding the decision behind these changes, visit the Components Rendering article.

For a live example, refer to the Appearance Demo of the CheckBox.

Options

The Size() method allows you to change the size of the CheckBox.

@(Html.Kendo().CheckBox()
    .Name("checkBoxBtn")
    .Checked(true)
    .Size(ComponentSize.Medium)
)

The following values are available for the Size option:

The default size value is Medium and it is added as a class k-checkbox-md to the input element.

<!-- default rendering -->
<input type="checkbox" class="k-checkbox k-checkbox-md" id="checkBoxName"/>

The border radius of the CheckBox can be customized through the Rounded() method.

@(Html.Kendo().CheckBox()
    .Name("checkBoxBtn")
    .Checked(true)
    .Rounded(Rounded.Medium)
)

The following values are available for the Rounded option:

The default value is Medium and it is added as a class k-roundend-md to the input element.

<!-- default rendering -->
<input type="checkbox" class="k-checkbox k-roundend-md" id="checkBoxName"/>