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.

Styling Input Elements

The following example demonstrates the RadioButton directive in action.

@Component({
    selector: 'my-app',
    template: `
        <input type="radio" name="foo" value="one" kendoRadioButton />
        <input type="radio" name="foo" value="two" kendoRadioButton />
        <input type="radio" name="foo" value="three" kendoRadioButton />
    `
})
class AppComponent {
}

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.

@Component({
    selector: 'my-app',
    template: `
      <input type="radio" name="foo" value="one" [(ngModel)]="model.foo" kendoRadioButton />
      <input type="radio" name="foo" value="two" [(ngModel)]="model.foo" kendoRadioButton />
      <input type="radio" name="foo" value="three" [(ngModel)]="model.foo" kendoRadioButton />
      <p>Model: {{model | json}}</p>
    `
})
class AppComponent {
    public model = {
        foo: 'two'
    };
}

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';

@Component({
    selector: 'my-app',
    template: `
    <form [formGroup]="formGroup">
      <input type="radio" name="foo" value="one" formControlName="foo" kendoRadioButton />
      <input type="radio" name="foo" value="two" formControlName="foo" kendoRadioButton />
      <input type="radio" name="foo" value="three" formControlName="foo" kendoRadioButton />
    </form>
    <p>Form value: {{formGroup.value | json}}</p>
    `
})
class AppComponent {
    public formGroup = new FormGroup({
        foo: new FormControl('two')
    });
}

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)
    });
}

Associating with Labels

The RadioButton can be associated with a HTML Label element like any regular <input type="radio"> element.

@Component({
    selector: 'my-app',
    template: `
      <label>One: 
        <input type="radio" name="foo" value="one" kendoRadioButton />
      </label>
      <label for="radio-two">Two: </label>
        <input id="radio-two" type="radio" name="foo" value="two" kendoRadioButton />
    `
})
class AppComponent {
}

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;
}

Suggested Links

• API Reference of the RadioButton Directive