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" 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
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 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 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 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 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
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" 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
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" 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 informations on how to use our radio component in template-driven forms.
Remember to import
FormsModule in your's
app.module.ts
Setting & getting the value
Bind in two-way ngModel from component.html with template and bind [value] with templateUnchecked and templateChecked in 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 informations on how to use our radio component in reactive forms.
Remember to import
ReactiveFormsModule in your's
app.module.ts
Setting & getting the value
Set 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.
// 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.