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">
Showing with a label
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>