Rate this docs

Angular Bootstrap radio buttons

Angular Radio Button - Bootstrap 4 & Material Design

Angular Radio button is a component used for allowing 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" mdbInputDirective>
                <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 mdbInputDirective>
                <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" mdbInputDirective>
                <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 mdbInputDirective>
                <label class="form-check-label" for="materialChecked">Material checked</label>
              </div>

              

Checked state

Add checked attribute to the <input> element yo pre-select 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 mdbInputDirective>
                <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 mdbInputDirective>
                <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 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 mdbInputDirective>
                <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 mdbInputDirective>
                <label class="custom-control-label" for="defaultCheckedDisabled2">Default checked disabled</label>
              </div>

              

Material checkbox MDB Pro component

To provide a proper cursor styling for material radio button, apart from 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 mdbInputDirective>
                <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 mdbInputDirective>
                <label class="form-check-label disabled" for="materialCheckedDisabled2">Material checked disabled</label>
              </div>

              

Inline

Default radio buttons

Group default radio buttons or checkboxes on the same horizontal row by adding .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" mdbInputDirective>
                <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" mdbInputDirective>
                <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" mdbInputDirective>
                <label class="custom-control-label" for="defaultInline3">3</label>
              </div>

              

Material radio buttons MDB Pro component

Group material radio buttons or checkboxes on the same horizontal row by adding .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" mdbInputDirective>
                <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" mdbInputDirective>
                <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" mdbInputDirective>
                <label class="form-check-label" for="materialInline3">3</label>
              </div>

               

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.

// MDB Angular Pro
import { InputsModule, ButtonsModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { InputsModule, ButtonsModule } from 'angular-bootstrap-md'

Radio buttons 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" mdbInputDirective>
            <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 mdbInputDirective>
            <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" mdbInputDirective>
            <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" mdbInputDirective>
            <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 mdbInputDirective>
            <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" mdbInputDirective>
            <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-->
  
        

  
          export class AppComponent {
            public radioModel: string = '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-->
  
        

  
          export class AppComponent {
            public radioModel: string = '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 icon="diamond" class="ml-2"></mdb-icon>
      </label>
      <label mdbBtn color="teal" rounded="true" [(ngModel)]="radioModel" mdbRadio="Middle" mdbWavesEffect>
        Radio 2
        <mdb-icon icon="user" class="ml-2"></mdb-icon>
      </label>
      <label mdbBtn color="teal" rounded="true" [(ngModel)]="radioModel" mdbRadio="Right" mdbWavesEffect>
        Radio 3
        <mdb-icon icon="code" class="ml-2"></mdb-icon>
      </label>
    </div>
    <!--Radio buttons-->
  
      

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