Completed
Last Updated: 16 Jan 2020 18:17 by ADMIN
Created by: Christoph
Comments: 2
Category: CheckBox
Type: Feature Request
8

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>

Problem:

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>