Components / Inputs

RadioButton Overview

The RadioButton enables you to style input type="radio" elements.

Basic Usage

The RadioButton lets the user create multiple inputs with separate values tied to a single model value by sharing the same name attribute. All regular input type="radio" HTML attributes and Angular bindings are applicable.

Associating with Labels

The RadioButton can be associated with an HTML label element like any regular <input type="radio"> element or with the Label component.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <div class="section">
            <h5>Association with native HTML label</h5>
            <div class="wrap">
                <label class="k-radio-label" for="foo">Foo</label>
                <input type="radio" id="foo" kendoRadioButton />
            </div>
        </div>

        <div class="section">
            <h5>Association with the Label component</h5>
            <div class="wrap">
                <kendo-label class="k-radio-label" [for]="bar" text="Bar"></kendo-label>
                <input type="radio" #bar kendoRadioButton />
            </div>
        </div>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .section {
            margin-top: 20px;
        }

    `]
})
export class AppComponent {}

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { LabelModule } from '@progress/kendo-angular-label';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        InputsModule,
        LabelModule
    ]
})
export class AppModule {}

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Forms Support

You can use the RadioButton in template-driven or reactive forms.

Template Forms

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

The following example demonstrates how to use the RadioButton in a template-driven form.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <label class="k-label" [for]="male">Male</label>
        <input type="radio" name="gender" value="Male" #male [(ngModel)]="model.gender" kendoRadioButton />

        <label class="k-label" [for]="female">Female</label>
        <input type="radio" name="gender" value="Female" #female [(ngModel)]="model.gender" kendoRadioButton />

        <label class="k-label" [for]="other">Other</label>
        <input type="radio" name="gender" value="Other" #other [(ngModel)]="model.gender" kendoRadioButton />
      <p>Model: {{model | json}}</p>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [` input[type=radio] { margin-right: 16px; }`]
})
class AppComponent {
    public model = {
        gender: null
    };
}

Reactive Forms

The FormGroup 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.

import {
    FormsModule,
    ReactiveFormsModule,
    FormControl,
    FormGroup
} from '@angular/forms';

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <form [formGroup]="formGroup">
            <label class="k-label" [for]="male">Male</label>
            <input type="radio" name="gender" value="Male" #male formControlName="gender" kendoRadioButton />

            <label class="k-label" [for]="female">Female</label>
            <input type="radio" name="gender" value="Female" #female formControlName="gender" kendoRadioButton />

            <label class="k-label" [for]="other">Other</label>
            <input type="radio" name="gender" value="Other" #other formControlName="gender" kendoRadioButton />
        </form>
         <p>Form value: {{formGroup.value | json}}</p>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [` input[type=radio] { margin-right: 16px; }`]
})
class AppComponent {
    public formGroup = new FormGroup({
        gender: new FormControl(null)
    });
}

FormField Association

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

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
    selector: 'my-app',
    template: `
        <div class="example">
            <form class="k-form" [formGroup]="form">
                <kendo-formfield [showHints]="'initial'">
                    <kendo-label class="k-label" text="Type of Confirmation"></kendo-label>
                        <ul class="k-radio-list">
                            <li class="k-radio-item">
                                <input type="radio" #phoneCall value="phoneCall" kendoRadioButton [formControlName]="'confirmation'" />
                                <kendo-label class="k-radio-label" [for]="phoneCall" text="Phone Call"></kendo-label>
                            </li>

                            <li class="k-radio-item">
                                <input type="radio" #email kendoRadioButton  value="email" [formControlName]="'confirmation'" />
                                <kendo-label class="k-radio-label" [for]="email" text="Via Email"></kendo-label>
                            </li>
                        </ul>
                        <kendo-formhint>Hint: Choose a way to receive a confirmation</kendo-formhint>
                        <kendo-formerror>Error: This field is required</kendo-formerror>
                </kendo-formfield>

                <kendo-formfield [orientation]="'horizontal'" [showHints]="'initial'">
                    <label class="k-label">Gender</label>

                    <ul class="k-radio-list k-list-horizontal">
                        <li class="k-radio-item">
                            <input type="radio" #male value="male" kendoRadioButton [formControlName]="'gender'" />
                            <kendo-label class="k-radio-label" [for]="male" text="Male"></kendo-label>
                        </li>

                        <li class="k-radio-item">
                            <input type="radio" #female value="female" kendoRadioButton [formControlName]="'gender'" />
                            <kendo-label class="k-radio-label" [for]="female" text="Female"></kendo-label>
                        </li>

                        <li class="k-radio-item">
                            <input type="radio" #other value="other" kendoRadioButton [formControlName]="'gender'" />
                            <kendo-label class="k-radio-label" [for]="other" text="Other"></kendo-label>
                        </li>
                    </ul>

                    <kendo-formerror>Error: This field is required</kendo-formerror>
                </kendo-formfield>
                <div class="k-form-buttons">
                    <button class="k-button k-primary" (click)="submitForm()">Submit</button>
                </div>
            </form>
        </div>
    `,
    styles: [`
        .k-form {
            width: 350px;
            padding: 20px;
        }
        .k-list-horizontal .k-radio-item {
            margin: 0 10px 0 0;
        }
    `]
})
export class AppComponent {
    public form: FormGroup;

    public data: any = {
        confirmation: null,
        gender: null
    };

    constructor() {
        this.form = new FormGroup({
            confirmation: new FormControl(this.data.confirmation, [Validators.required]),
            gender: new FormControl(this.data.gender, [Validators.required]),
        });
    }

    public submitForm(): void {
        this.form.markAllAsTouched();
    }
}

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { LabelModule } from '@progress/kendo-angular-label';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        InputsModule,
        LabelModule
    ]
})
export class AppModule {}

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Required RadioButton

You can make the RadioButton required.

To do so use one of the following:

import {
    FormsModule,
    ReactiveFormsModule,
    FormControl,
    FormGroup,
    Validators
} from '@angular/forms';

@Component({
    selector: 'my-app',
    template: `
        <p>Required Attribute:</p>
        <form [formGroup]="formGroup">
            <input type="radio" required value="one" formControlName="foo" kendoRadioButton />
            <input type="radio" value="two" formControlName="foo" kendoRadioButton />
            <input type="radio" value="three" formControlName="foo" kendoRadioButton />
        </form>
        <p>Form value: {{formGroup.value | json}}; Valid: {{formGroup.valid}}</p>

        <p>Required Property Binding:</p>
        <form [formGroup]="secondFormGroup">
            <input type="radio" [required]="isRequired" value="one" formControlName="foo" kendoRadioButton />
            <input type="radio" value="two" formControlName="foo" kendoRadioButton />
            <input type="radio" value="three" formControlName="foo" kendoRadioButton />
        </form>
        <p>Form value: {{secondFormGroup.value | json}}; Valid: {{secondFormGroup.valid}}</p>

        <p>Angular Validators:</p>
        <form [formGroup]="thirdFormGroup">
            <input type="radio" value="one" formControlName="foo" kendoRadioButton />
            <input type="radio" value="two" formControlName="foo" kendoRadioButton />
            <input type="radio" value="three" formControlName="foo" kendoRadioButton />
        </form>
        <p>Form value: {{secondFormGroup.value | json}}; Valid: {{secondFormGroup.valid}}</p>
    `,
    styles: [`
        form {
            width: 100px;
            padding: 5px;
            text-align: center;
        }
        form.ng-invalid {
            border: 1px solid red;
        }
    `]
})
class AppComponent {
    public isRequired = true;
    public formGroup = new FormGroup({
        foo: new FormControl()
    });
    public secondFormGroup = new FormGroup({
        foo: new FormControl()
    });
    public thirdFormGroup = new FormGroup({
        foo: new FormControl(null, Validators.required)
    });
}

Disabled RadioButton

By default, the RadioButton is enabled.

To disable user interaction with the element, use the disabled attribute or Angular property binding.

@Component({
    selector: 'my-app',
    template: `
        <input type="radio" disabled name="foo" value="one" kendoRadioButton />
        <input type="radio" [disabled]="isDisabled" name="foo" value="two" kendoRadioButton />
        <input type="radio" name="foo" value="three" kendoRadioButton />
        <p>The first two options are disabled</p>
    `
})
class AppComponent {
    public isDisabled = true;
}

In this article