Angular Bootstrap Radio Button

Angular Radio Button - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

The Angular Radio button is a component used to allow a user to make a single choice among many options, while Checkboxes are for selecting multiple options.

Default radio buttons

Default styling for Bootstrap radio button component

<!-- Default unchecked -->
<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="defaultUnchecked" name="defaultExampleRadios" mdbInput>
  <label class="custom-control-label" for="defaultUnchecked">Default unchecked</label>
</div>
<!-- Default checked -->
<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="defaultChecked" name="defaultExampleRadios" checked mdbInput>
  <label class="custom-control-label" for="defaultChecked">Default checked</label>
</div>

Material radio buttons MDB Pro component

Material Design styling for Bootstrap radio button component

<!-- Material unchecked -->
<div class="form-check">
  <input type="radio" class="form-check-input" id="materialUnchecked" name="materialExampleRadios" mdbInput>
  <label class="form-check-label" for="materialUnchecked">Material unchecked</label>
</div>
<!-- Material checked -->
<div class="form-check">
  <input type="radio" class="form-check-input" id="materialChecked" name="materialExampleRadios" checked mdbInput>
  <label class="form-check-label" for="materialChecked">Material checked</label>
</div>

Checked state

Add a checked attribute to the <input> element to pre-select the radio button when the page loads.

The checked attribute is a boolean attribute.

Default checkbox 

<!-- Default checked -->
<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="defaultChecked2" name="defaultExample2" checked mdbInput>
  <label class="custom-control-label" for="defaultChecked2">Default checked</label>
</div>

Material checkbox MDB Pro component 

<!-- Material checked -->
<div class="form-check">
  <input type="radio" class="form-check-input" id="materialChecked2" name="materialExample2" checked mdbInput>
  <label class="form-check-label" for="materialChecked2">Material checked</label>
</div>

Disabled state

Add the disabled boolean attribute to the <input> and the custom indicator and the label description will be automatically styled and blocked.

A disabled <input> element is unusable and un-clickable.

Default radio buttons 

<!-- Default unchecked disabled -->
<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="defaultUncheckedDisabled2" name="disabledGroupExample" disabled mdbInput>
  <label class="custom-control-label" for="defaultUncheckedDisabled2">Default unchecked disabled</label>
</div>
<!-- Default checked disabled -->
<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="defaultCheckedDisabled2" name="disabledGroupExample" checked disabled mdbInput>
  <label class="custom-control-label" for="defaultCheckedDisabled2">Default checked disabled</label>
</div>

Material checkbox MDB Pro component

To provide a proper cursor styling for the material radio button, apart from the disabled attribute you’ll also need to add the .disabled class to the <label> element.

<!-- Material unchecked disabled -->
<div class="form-check">
  <input type="radio" class="form-check-input" id="materialUncheckedDisabled2" name="disabledGroupExample2" disabled mdbInput>
  <label class="form-check-label disabled" for="materialUncheckedDisabled2">Material unchecked disabled</label>
</div>
<!-- Material checked disabled -->
<div class="form-check">
  <input type="radio" class="form-check-input" id="materialCheckedDisabled2" name="disabledGroupExample2" checked disabled mdbInput>
  <label class="form-check-label disabled" for="materialCheckedDisabled2">Material checked disabled</label>
</div>

Inline

Default radio buttons

You may group default radio buttons or checkboxes on the same horizontal row by adding the .custom-control-inline class to any parent element of the <input> element.

<!-- Default inline 1-->
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" class="custom-control-input" id="defaultInline1" name="inlineDefaultRadiosExample" mdbInput>
  <label class="custom-control-label" for="defaultInline1">1</label>
</div>
<!-- Default inline 2-->
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" class="custom-control-input" id="defaultInline2" name="inlineDefaultRadiosExample" mdbInput>
  <label class="custom-control-label" for="defaultInline2">2</label>
</div>
<!-- Default inline 3-->
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" class="custom-control-input" id="defaultInline3" name="inlineDefaultRadiosExample" mdbInput>
  <label class="custom-control-label" for="defaultInline3">3</label>
</div>

Material radio buttons MDB Pro component

You can also group material radio buttons or checkboxes on the same horizontal row by adding the .form-check-inline class to any parent element of the <input> element.

<!-- Material inline 1 -->
<div class="form-check form-check-inline">
  <input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample" mdbInput>
  <label class="form-check-label" for="materialInline1">1</label>
</div>
<!-- Material inline 2 -->
<div class="form-check form-check-inline">
  <input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample" mdbInput>
  <label class="form-check-label" for="materialInline2">2</label>
</div>
<!-- Material inline 3 -->
<div class="form-check form-check-inline">
  <input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample" mdbInput>
  <label class="form-check-label" for="materialInline3">3</label>
</div>

Template-driven forms MDB Pro component

In this section, you will find information on how to use our radio component in template-driven forms.

Remember to import the FormsModule into your app.module.ts

Setting & getting the value

Bind in the two-way ngModel from component.html with template and bind the [value] with both templateUnchecked and templateChecked in the component.ts file

<form>
  <div class="form-check">
    <input type="radio" class="form-check-input" id="materialUnchecked" name="materialExampleRadios"
           [(ngModel)]="template" [value]="templateUnchecked">
    <label class="form-check-label" for="materialUnchecked">Template unchecked</label>
  </div>
  <div class="form-check">
    <input type="radio" class="form-check-input" id="materialChecked" name="materialExampleRadios"
           [(ngModel)]="template" [value]="templateChecked">
    <label class="form-check-label" for="materialChecked">Template checked</label>
  </div>
</form>
<button mdbBtn color="primary" mdbWavesEffect (click)="getCheckboxesValue()">Get radio value</button>
import { Component } from '@angular/core';

@Component({
  selector: 'template-driven-radio',
  templateUrl: 'template-driven-radio.component.html',
})
export class TemplateDrivenRadioComponent {
  templateUnchecked = false;
  templateChecked = true;
  template = true;

  getCheckboxesValue() {
    console.log('ngModel value', this.template);
  }
}

Reactive forms MDB Pro component

In this section, you will find information on how to use our radio component in reactive forms.

Remember to import the ReactiveFormsModule into your app.module.ts file.

Setting & getting the value

Set the default value with FormControl and [value].

<form [formGroup]="reactiveForm">
  <div class="form-check">
    <input type="radio" class="form-check-input" id="materialUnchecked2" [value]="false"
           formControlName="reactiveRadio" name="reactiveRadio">
    <label class="form-check-label" for="materialUnchecked2">Reactive unchecked</label>
  </div>
  <div class="form-check">
    <input type="radio" class="form-check-input" id="materialChecked2" [value]="true"
           formControlName="reactiveRadio" name="reactiveRadio">
    <label class="form-check-label" for="materialChecked2">Reactive checked</label>
  </div>
</form>
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'reactive-forms-radio',
  templateUrl: 'reactive-forms-radio.component.html',
})
export class ReactiveFormsRadioComponent {
  reactiveForm: FormGroup = new FormGroup({
    reactiveRadio: new FormControl(true)
  });

  constructor() {
    this.reactiveForm.controls['reactiveRadio'].valueChanges.subscribe((state: any) => {
      console.log(state);
    });
  }
}

Angular Radio - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of Angular radio component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

import { InputsModule, ButtonsModule } from 'ng-uikit-pro-standard'
import { InputsModule, ButtonsModule } from 'angular-bootstrap-md'
Import example Modules list

Angular Radio Button - examples & customization

More examples of customization Angular Radio buttons in your application.

Radio buttons with gap MDB Pro component

Add .with-gap class to the <input> element to apply a "gap style" to the radio button.

<!--Radio group-->
<div class="form-check">
  <input type="radio" class="form-check-input with-gap" id="radioGap1" name="groupOfRadioGap" mdbInput>
  <label class="form-check-label" for="radioGap1">Option 1</label>
</div>

<div class="form-check">
  <input type="radio" class="form-check-input with-gap" id="radioGap2" name="groupOfRadioGap" checked mdbInput>
  <label class="form-check-label" for="radioGap2">Option 2</label>
</div>

<div class="form-check">
  <input type="radio" class="form-check-input with-gap" id="radioGap3" name="groupOfRadioGap" mdbInput>
  <label class="form-check-label" for="radioGap3">Option 3</label>
</div>
<!--Radio group-->

Radio button color change MDB Pro component 

<!--Radio group-->
<div class="form-check radio-green">
  <input type="radio" class="form-check-input" id="radioGreen1" name="groupOfRadioGreen" mdbInput>
  <label class="form-check-label" for="radioGreen1">Option 1</label>
</div>

<div class="form-check radio-green">
  <input type="radio" class="form-check-input" id="radioGreen2" name="groupOfRadioGreen" checked mdbInput>
  <label class="form-check-label" for="radioGreen2">Option 2</label>
</div>

<div class="form-check radio-green">
  <input type="radio" class="form-check-input" id="radioGreen3" name="groupOfRadioGreen" mdbInput>
  <label class="form-check-label" for="radioGreen3">Option 3</label>
</div>
<!--Radio group-->
.radio-green [type="radio"]:checked+label:after {
  border-color: #00C851;
  background-color: #00C851;
}

Classic radio buttons 

<!--Radio buttons-->
<div class="btn-group">
  <label mdbBtn color="primary" [(ngModel)]="radioModel" mdbRadio="Left" mdbWavesEffect>
      Radio 1 (pre-checked)
  </label>
  <label mdbBtn color="primary" [(ngModel)]="radioModel" mdbRadio="Middle" mdbWavesEffect>
      Radio 2
  </label>
  <label mdbBtn color="primary" [(ngModel)]="radioModel" mdbRadio="Right" mdbWavesEffect>
      Radio 3
  </label>
</div>
<!--Radio buttons-->
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  radioModel = 'Left';
}

Rounded radio buttons MDB Pro component 

<!--Radio buttons-->
<div class="btn-group">
  <label mdbBtn color="purple" rounded="true" [(ngModel)]="radioModel" mdbRadio="Left" mdbWavesEffect>
    Radio 1 (pre-checked)
  </label>
  <label mdbBtn color="purple" rounded="true" [(ngModel)]="radioModel" mdbRadio="Middle" mdbWavesEffect>
    Radio 2
  </label>
  <label mdbBtn color="purple" rounded="true" [(ngModel)]="radioModel" mdbRadio="Right" mdbWavesEffect>
    Radio 3
  </label>
</div>
<!--Radio buttons-->
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  radioModel = 'Left';
}

Rounded radio buttons with icons MDB Pro component 

<!--Radio buttons-->
<div class="btn-group">
  <label mdbBtn color="teal" rounded="true" [(ngModel)]="radioModel" mdbRadio="Left" mdbWavesEffect>
    Radio 1 (pre-checked)
    <mdb-icon far icon="gem" class="ml-2"></mdb-icon>
  </label>
  <label mdbBtn color="teal" rounded="true" [(ngModel)]="radioModel" mdbRadio="Middle" mdbWavesEffect>
    Radio 2
    <mdb-icon fas icon="user" class="ml-2"></mdb-icon>
  </label>
  <label mdbBtn color="teal" rounded="true" [(ngModel)]="radioModel" mdbRadio="Right" mdbWavesEffect>
    Radio 3
    <mdb-icon fas icon="code" class="ml-2"></mdb-icon>
  </label>
</div>
<!--Radio buttons-->
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  radioModel = 'Left';
}