New to Kendo UI for Angular? Start a free 30-day trial

Labels Association

The label can be used to provide additional information about the RadioButton, such as its purpose or the value it represents.

The RadioButton component allows you to associate a label element. The label can be displayed before or after the input, depending on your design requirements. The label is not required, but recommended for better accessibility and usability.

The label can be associated with the RadioButton component in two ways:

By using the Kendo UI for Angular Label component.
By using an HTML label element (see Associating to HTML Label Element).

Associating to Label Component

You can associate the RadioButton component with the Kendo UI for Angular Label component. Regardless of the label position, set the for property of the Label component to the #id of the RadioButton component.

html
<kendo-radiobutton #radiobtn [checked]="true"></kendo-radiobutton>
<kendo-label class="k-radio-label" [for]="radiobtn" text="Label"></kendo-label>
html
<kendo-label
    [for]="radiobtn"
    text="Label"
    style="display: inline;margin-inline-end: 4px;">
</kendo-label>
<kendo-radiobutton #radiobtn [checked]="true"></kendo-radiobutton>

The following example demonstrates how to associate the RadioButton component and the kendoRadioButton directive with the Kendo Label component.

Change Theme

Theme

Loading ...

Associating to HTML Label Element

You can associated the RadioButton component with the HTML label element. The label can be displayed before of after the input. Regardless of the label position, set the for attribute of the HTML label element to the #id of the RadioButton component.

html
<kendo-radiobutton #radiobtn [checked]="true"></kendo-radiobutton>
<label class="k-radio-label" [for]="radiobtn" >RadioButton Component</label>
html
<label
    class="k-radio-label"
    [for]="radiobtn"
    style="display: inline; margin-inline-end: 4px;">
    RadioButton Component
</label>
<kendo-radiobutton #radiobtn [checked]="true"></kendo-radiobutton>

The following example demonstrates how to associate the RadioButton component and the kendoRadioButton directive with an HTML label element.