Angular Bootstrap checkbox
Angular Checkbox - 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
Angular Bootstrap checkbox is a component used to allow a user to make a multiple choice. It is broadly used in the forms and surveys.
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
Default checkboxes
Default styling for Angular Bootstrap Checkbox component
<!-- Default unchecked -->
<mdb-checkbox [default]="true">Default unchecked</mdb-checkbox>
Material checkboxes MDB Pro component
Material Design styling for Angular Bootstrap Checkbox component
<!-- Material unchecked -->
<mdb-checkbox>Material unchecked</mdb-checkbox>
Checked state
Add a
[checked]="true"
input to the pre-select checkbox when the page loads.
Default checkbox
<!-- Default checked -->
<mdb-checkbox [checked]="true" [default]="true">Default checked</mdb-checkbox>
Material checkbox MDB Pro component
<!-- Material checked -->
<mdb-checkbox [checked]="true">Material checked</mdb-checkbox>
Indeterminate state
Note: The indeterminate state is visual only. The checkbox is still either checked or unchecked as a state.
Add an [indeterminate]="true"
input to set an indeterminate state to your checkbox
Default checkbox
<!-- Default indeterminate -->
<mdb-checkbox [indeterminate]="true" [default]="true">Default checked</mdb-checkbox>
Material checkbox MDB Pro component
<!-- Material indeterminate -->
<mdb-checkbox [indeterminate]="true">Material checked</mdb-checkbox>
Disabled state
Add an
[disabled]="true"
input
and the custom indicator and label description will be automatically styled and blocked.
A disabled checkbox component is unusable and un-clickable.
Default checkbox
<!-- Default unchecked disabled -->
<mdb-checkbox [disabled]="true" [default]="true">Default unchecked disabled</mdb-checkbox>
<!-- Default checked disabled -->
<mdb-checkbox [disabled]="true" [checked]="true" [default]="true">Default checked disabled</mdb-checkbox>
Material checkbox MDB Pro component
<!-- Material unchecked disabled -->
<mdb-checkbox [disabled]="true">Material unchecked disabled</mdb-checkbox>
<!-- Material checked disabled -->
<mdb-checkbox [disabled]="true" [checked]="true">Material checked disabled</mdb-checkbox>
Inline
Add an [inline]="true"
input to group checkboxes on the same horizontal row.
Default checkboxes
<!-- Default inline 1-->
<mdb-checkbox [inline]="true" [default]="true">1</mdb-checkbox>
<!-- Default inline 2-->
<mdb-checkbox [inline]="true" [default]="true">2</mdb-checkbox>
<!-- Default inline 3-->
<mdb-checkbox [inline]="true" [default]="true">3</mdb-checkbox>
Material checkboxes MDB Pro component
<!-- Material inline 1 -->
<mdb-checkbox [inline]="true">1</mdb-checkbox>
<!-- Material inline 2 -->
<mdb-checkbox [inline]="true">2</mdb-checkbox>
<!-- Material inline 3 -->
<mdb-checkbox [inline]="true">3</mdb-checkbox>
Template-driven forms MDB Pro component
In this section, you will find information on how to use our checkbox component in template-driven forms.
Remember to import
FormsModule
into your
app.module.ts
file.
Setting & getting the value
Just bind in a two-way ngModel from component.html with templateChecked
or templateUnchecked
in the component.ts file
<form>
<mdb-checkbox [(ngModel)]="templateChecked" name="templateChecked">Checked with ngModel</mdb-checkbox>
<mdb-checkbox [(ngModel)]="templateUnchecked" name="templateUnchecked">Unchecked with ngModel</mdb-checkbox>
</form>
<button mdbBtn color="primary" mdbWavesEffect (click)="getCheckboxesValue()">Get checkboxes value</button>
import { Component } from '@angular/core';
@Component({
selector: 'template-driven-checkbox',
templateUrl: 'template-driven-checkbox.component.html',
})
export class TemplateDrivenCheckboxComponent {
templateChecked = true;
templateUnchecked = false;
getCheckboxesValue() {
console.log('Checked value:', this.templateChecked);
console.log('Unchecked value:', this.templateUnchecked);
}
}
Reactive forms MDB Pro component
In this section, you will find information on how to use our checkbox component in reactive forms.
Remember to import
ReactiveFormsModule
into your
app.module.ts
file.
Setting & getting the value
Set the default value in FormControl
<form [formGroup]="reactiveForm">
<mdb-checkbox formControlName="checked">Checked with FormControl</mdb-checkbox>
<mdb-checkbox formControlName="unchecked">Unchecked with FormControl</mdb-checkbox>
</form>
<button mdbBtn color="primary" mdbWavesEffect (click)="getCheckboxesValue()">Get checkboxes value</button>
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'reactive-forms-checkbox',
templateUrl: 'reactive-forms-checkbox.component.html',
})
export class ReactiveFormsCheckboxComponent {
reactiveForm: FormGroup = new FormGroup({
checked: new FormControl(true),
unchecked: new FormControl(false)
});
getCheckboxesValue() {
console.log('Checked value:', this.reactiveForm.controls['checked'].value);
console.log('Unchecked value:', this.reactiveForm.controls['unchecked'].value);
}
}
Angular Checkbox - API
In this section you will find informations about required modules and available inputs, outputs, methods and events of checkbox 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 { CheckboxModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { CheckboxModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md'
Components
MdbCheckbox
Selector: mdb-checkbox
Type: CheckboxComponent
Inputs
Name | Type | Default | Description | Example |
---|---|---|---|---|
checkboxPosition |
string | 'left' | Specifies checkbox position relative to label (left or right) | [checkboxPosition]="'right' |
checked |
boolean | false | Specifies the checked state of the checkbox | [checked]="true" |
default |
boolean | false | Changes checkbox style to default | [default]="true" |
disabled |
boolean | false | Specifies the disabled state of the checkbox | [disabled]="true" |
filledIn |
boolean | false | Changes checkbox style to filled-in | [filledIn]="true" |
id |
string | - | Unique id for checkbox input (will be auto-generated if no value is provided) | [id]="'my-checkbox-1'" |
indeterminate |
boolean | false | Specifies the indeterminate state of the checkbox | [indeterminate]="true" |
inline |
boolean | false | Groups checkboxes on the same horizontal row | [inline]="true" |
name |
string | - | Specifies the name attribute for native input element | [name]="'my-checkbox'" |
required |
boolean | false | Specifies the required state of the checkbox | [required]="true" |
rounded |
boolean | false | Changes checkbox style to rounded and filled-in | [rounded]="true" |
tabIndex |
number | null | Specifies the tabindex for the checkbox | [tabIndex]="1" |
value |
string | - | Specifies the value attribute for native input element | [value]="'checkbox-value'" |
Outputs
Name | Type | Description | Example |
---|---|---|---|
change |
EventEmitter<MdbCheckboxChange> | Toggles the checked state of the checkbox | (change)="onChange($event)" |
MdbCheckboxChange
Change event object emitted by checkbox component.
Name | Type | Description |
---|---|---|
element |
CheckboxComponent | The source element of the event |
checked |
boolean | Current checked state of the checkbox |
Methods
You can get access to checkbox methods from another component.
Name | Description |
---|---|
toggle |
Toggles the checked state of the checkbox |
Angular Checkbox - examples & customization
Filled-in checkbox MDB Pro component
Add [filledIn]="true"
input to your component to turn it into filled-in checkbox.
<!-- Filled-in checkbox -->
<mdb-checkbox [filledIn]="true" [checked]="true">Filled-in checkbox</mdb-checkbox>
<!-- Filled-in checkbox disabled-->
<mdb-checkbox [filledIn]="true" [checked]="true" [disabled]="true">Filled-in checkbox disabled</mdb-checkbox>
Checkbox color change MDB Pro component
You can add your own class to the checkbox component to change its appearance.
<!-- Teal example -->
<mdb-checkbox class="checkbox-teal" [checked]="true">Teal example</mdb-checkbox>
<!-- Filled-in orange example -->
<mdb-checkbox class="checkbox-warning-filled" [filledIn]="true" [checked]="true">Filled-in orange example</mdb-checkbox>
mdb-checkbox.checkbox-teal [type="checkbox"]:checked+label:before {
border-color: transparent #009688 #009688 transparent;
}
mdb-checkbox.checkbox-warning-filled [type="checkbox"][class*='filled-in']:checked+label:after {
border-color: #FF8800;
background-color: #FF8800;
}
Rounded checkbox MDB Pro component
Add [rounded]="true"
input to your component to turn it into filled-in rounded checkbox.
<!-- Filled-in rounded example -->
<mdb-checkbox [rounded]="true" [checked]="true">Filled-in rounded example</mdb-checkbox>
Checkbox with changed position MDB Pro component
Add [checkboxPosition]="'right'"
input to move your checkbox element to the right side of the label.
<!-- Filled-in rounded example -->
<mdb-checkbox [checkboxPosition]="'right'" [checked]="true">Checkbox with changed position</mdb-checkbox>