Angular Bootstrap Radio Button

Bootstrap radio buttons are option buttons, which allows users to choose one of a predefined set of two or more options. Commonly used in forms and surveys.

Because of their high UX value, radio are usually present in a crowded UI designs. Thanks to the flexibility of Bootstrap, they are always perfectly positioned with an obvious use purpose.

Examples of Angular Bootstrap radio use:

  • Busy personal information form
  • Preference survey
  • Single choice questionary

Basic example MDB Pro component

<div class="form-check">
  <input class="form-check-input" mdbInputDirective name="group1" type="radio" id="radio1">
  <label class="form-check-label" for="radio1">Option 1</label>
</div>

<div class="form-check">
  <input class="form-check-input" mdbInputDirective name="group1" type="radio" id="radio2">
  <label class="form-check-label" for="radio2">Option 2</label>
</div>

<div class="form-check">
  <input class="form-check-input" mdbInputDirective name="group1" type="radio" id="radio3">
  <label class="form-check-label" for="radio3">Option 3</label>
</div>

Colorful basic radio buttons MDB Pro component


<div class="form-check radio-green">
  <input class="form-check-input" mdbInputDirective name="group1" type="radio" id="radio1">
  <label class="form-check-label" for="radio1">Option 1</label>
</div>

<div class="form-check  radio-green">
  <input class="form-check-input" mdbInputDirective name="group1" type="radio" id="radio2">
  <label class="form-check-label" for="radio2">Option 2</label>
</div>

<div class="form-check  radio-green">
  <input class="form-check-input" mdbInputDirective name="group1" type="radio" id="radio3">
  <label class="form-check-label" for="radio3">Option 3</label>
</div>
	

.radio-green [type="radio"]:checked+label:after {
    border-color: #00C851;
    background-color: #00C851;
}
/*Gap*/

.radio-green-gap [type="radio"].with-gap:checked+label:before {
    border-color: #00C851;
}

.radio-green-gap [type="radio"]:checked+label:after {
    border-color: #00C851;
    background-color: #00C851;
}
  

Radio buttons with gap MDB Pro component

<div class="form-check">
  <input name="group2" type="radio" class="form-check-input with-gap" id="radio4">
  <label class="form-check-label" for="radio4">Option 1</label>
</div>

<div class="form-check">
  <input name="group2" type="radio" class="orm-check-input with-gap" id="radio5">
  <label class="form-check-label" for="radio5">Option 2</label>
</div>

<div class="form-check">
  <input name="group2" type="radio" class="orm-check-input with-gap" id="radio6">
  <label class="form-check-label" for="radio6">Option 3</label>
</div>

Colorful radio buttons with gap MDB Pro component


<div class="form-check radio-green-gap">
  <input name="group2" type="radio" class="form-check-input with-gap" id="radio4">
  <label for="radio4" class="form-check-label">Option 1</label>
</div>

<div class="form-check  radio-green-gap">
  <input name="group2" type="radio" class="form-check-input with-gap" id="radio5">
  <label for="radio5" class="form-check-label">Option 2</label>
</div>

<div class="form-check  radio-green-gap">
  <input name="group2" type="radio" class="form-check-input with-gap" id="radio6">
  <label for="radio6" class="form-check-label">Option 3</label>
</div>
	

.radio-green [type="radio"]:checked+label:after {
    border-color: #00C851;
    background-color: #00C851;
}
/*Gap*/

.radio-green-gap [type="radio"].with-gap:checked+label:before {
    border-color: #00C851;
}

.radio-green-gap [type="radio"]:checked+label:after {
    border-color: #00C851;
    background-color: #00C851;
}
  

Inline radio buttons MDB Pro component

<form class="form-inline">
    <div class="form-check mr-3">
        <input class="form-check-input" name="group1" type="radio" id="radio11" checked="checked" mdbInputDirective>
        <label class="form-check-label" for="radio11">Option 1</label>
    </div>

    <div class="form-check mr-3">
        <input class="form-check-input" name="group1" type="radio" id="radio21" mdbInputDirective>
        <label class="form-check-label" for="radio21">Option 2</label>
    </div>

    <div class="form-check mr-3">
        <input class="form-check-input" name="group1" type="radio" id="radio31" mdbInputDirective>
        <label class="form-check-label" for="radio31">Option 3</label>
    </div>
</form>

Disabled radio buttons MDB Pro component

<div class="form-check">
  <input name="group2" type="radio" id="radio4" class="form-check-input" disabled>
  <label class="form-check-label" for="radio4">Option 1</label>
</div>

<div class="form-check">
  <input name="group2" type="radio" id="radio5" class="form-check-input" disabled>
  <label class="form-check-label"  for="radio5">Option 2</label>
</div>

<div class="form-check">
  <input name="group2" type="radio" id="radio6" class="form-check-input" checked>
  <label class="form-check-label"  for="radio6">Option 3</label>
</div>

Classic radio buttons


<div class="btn-group">
    <label class="btn btn-primary waves-light" [(ngModel)]="radioModel" mdbRadio="Left" mdbWavesEffect>
        Radio 1 (preselected)
    </label>
    <label class="btn btn-primary waves-light" [(ngModel)]="radioModel" mdbRadio="Middle" mdbWavesEffect>
        Radio 2
    </label>
    <label class="btn btn-primary waves-light" [(ngModel)]="radioModel" mdbRadio="Right" mdbWavesEffect>
        Radio 3
    </label>
</div>

export class AppComponent {
    public radioModel: string = 'Left';
}

API Reference:

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.

API Reference for MDB Angular Radio:
// MDB Angular Pro
import { ButtonsModule, WavesModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { ButtonsModule, WavesModule } from 'angular-bootstrap-md'