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

Forms Support

You can use the RadioButton in Template-driven and Reactive forms.

Template Forms

The template-driven forms enable you to bind the RadioButton to the model by using the ngModel directive.

The following example demonstrates how to accomplish a two-way binding by using the ngModel directive.

Example
View Source
Change Theme:

Reactive Forms

The FormGroup decorator provides a way to render reactive forms. For more details, refer to the Angular documentation.

The following example demonstrates how to use the RadioButton in a reactive form.

Example
View Source
Change Theme:

Managing the RadioButton Disabled State in Reactive Forms

To disable the RadioButton component when working with reactive forms and Angular 15 or later, use the FormControl's disabled property/option or disable() method.

Angular 15 introduces a breaking change affecting the synchronization of setDisabledState with the model-DOM. This impacts components using the disabled attribute. As a result, the disabled property of the Kendo UI for Angular components used prior to Angular 15 is no longer working in reactive forms.

Example
View Source
Change Theme:

FormField Association

The Kendo UI for Angular FormField component enables you to group form-related elements, such as inputs, labels, hint and error messages, and configure their behavior.

The FormField automatically inserts the label before any form control. To position the RadioButton before a label, nest the two elements within a wrapper element.

The following example demonstrates how to use the RadioButton within a FormField with hint and error messages.

Example
View Source
Change Theme: