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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

FormField Association

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

Example
View Source
Edit In Stackblitz  
Change Theme:

Required RadioButton

You can make the RadioButton required.

To do so use one of the following:

Example
View Source
Edit In Stackblitz  
Change Theme:

Disabled RadioButton

By default, the RadioButton is enabled.

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

Example
View Source
Edit In Stackblitz  
Change Theme: