Last Updated: 14 Jan 2019 10:04 by ADMIN
Created on: 12 Jan 2019 18:53
Category: Kendo UI for Angular 2+
Type: Feature Request
Support checkboxes without id attribute

Today the checkbox styles work only if we place the label behind the input and connect them use id + for attribute:

        <input type="checkbox" id="ch1" class="k-checkbox" checked />
        <label class="k-checkbox-label" for="ch1">Checkbox 1</label>


While it works most times, it quite difficult to ensure a unique id inside an angular component. We have to ensure, it's unique over all currently rendered components.

A clean solution would require something like this:

// MyComponent
let componentIndex = 0;

class MyComponent {
  checkboxId: `my-component-${componentIndex++}-checkbox`;

// Template
        <input type="checkbox" [id]="checkboxId" class="k-checkbox" checked />
        <label class="k-checkbox-label" [for]="checkboxId">Checkbox 1</label>

Feature request:

Support implicit label association like so:

<label class="k-checkbox"><input type="checkbox" /> My label</label>

1 comment
Dimiter Topalov
Posted on: 14 Jan 2019 10:04
Hello Christoph,

Thank you for sharing your idea. Indeed, providing the developers with the option for wrapping the checkbox within the label element will be a valuable enhancement to our current functionality that requires all labels to be associated to their checkboxes via the id attribute.

We will track the customer demand here, and consider implementing this feature for our next official release, scheduled in May or a subsequent release, depending on the interest.

Dimiter Topalov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.