New to Telerik UI for ASP.NET MVC? Download free 30-day trial

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

  • Size()—configures the overall size of the component.
  • Rounded()—configures the border radius of the component.

Size

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:

  • Small
  • Medium
  • Large

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"/>

Rounded

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:

  • Small
  • Medium
  • Large

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"/>

See Also

In this article