Checkboxes and RadioButtons

The Kendo UI Checkbox and Kendo UI RadioButton are a set of classes that add styling to input elements of type checkbox and radio.

Modern browsers support the appearance property. This enables customizing the look of checkboxes and radios by removing the platform-native styling.

Getting Started

To show a checkbox, utilize the .k-checkbox class which will apply the Kendo styles on the input element.

<input type="checkbox" class="k-checkbox">

Similarly, to show a styled radiobutton use the .k-radio class.

<input type="radio" name="engine" class="k-radio">

Following good practices it is recommended to have text related to the input. There are different ways to achieve that:

Add a label element with for attribute that matches the id of the checkbox:

<input type="checkbox" id="check1" class="k-checkbox" checked="checked">
<label for="check1">I like apples</label>

And for the radiobutton:

<input type="radio" name="engine" id="radio1" class="k-radio">
<label for="radio1">Oranges</label>

Another option is to wrap the input in a label element and have the text in a span:

Checkbox:

<label>
    <input type="checkbox" id="check1" class="k-checkbox" checked="checked">
    <span>I like apples</span>
</label>

RadioButton:

<label>
    <input type="radio" name="engine" id="radio1" class="k-radio">
    <span>Oranges</span>
</label>