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

Option 1

Option 2

Option 3

<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

Option 1

Option 2

Option 3



  
  Option 1



  
  Option 2



  
  Option 3


.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

Option 1

Option 2

Option 3

<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

Option 1

Option 2

Option 3



  
  Option 1



  
  Option 2



  
  Option 3


.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

Option 1

Option 2

Option 3

<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

radio 1 (pre-checked) radio 2 radio 3



    
        Radio 1 (preselected)
    
    
        Radio 2
    
    
        Radio 3


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, ButtonsModule } from 'ng-uikit-pro-standard'

// MDB Angular Free
import { ButtonsModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md'

Import example Modules list