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. 

        
            
            import { CheckboxModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'
          
        
    
        
            
            import { CheckboxModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md'
Import example Modules list

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>

Classic checkbox buttons 

        
            
            <!--Classic checkbox buttons-->
            <div class="btn-group">
              <label mdbBtn color="primary" class="waves-light active" [(ngModel)]="checkboxModel.left" mdbCheckbox mdbWavesEffect>
                  Checkbox 1 (pre-checked)
              </label>
              <label mdbBtn color="primary" class="waves-light" [(ngModel)]="checkboxModel.middle" mdbCheckbox mdbWavesEffect>
                  Checkbox 2
              </label>
              <label mdbBtn color="primary" class="waves-light" [(ngModel)]="checkboxModel.right" mdbCheckbox mdbWavesEffect>
                  Checkbox 3
              </label>
            </div>
            <!--Classic checkbox buttons-->
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
                selector: 'classic-checkbox-buttons',
                templateUrl: './classic-checkbox-buttons.html'
            })
            export class ClassicCheckboxButtonsComponent {
              checkboxModel: any = { left: true, middle: false, right: false };
            }

Rounded checkbox buttons MDB Pro component 

        
            
            <!--Rounded checkbox buttons-->
            <div class="btn-group">
              <label mdbBtn color="pink" rounded="true" class="active form-check-label" [(ngModel)]="checkboxModel.left" mdbCheckbox mdbWavesEffect>
                  Checkbox 1 (pre-checked)
              </label>
              <label mdbBtn color="pink" rounded="true" class="form-check-label" [(ngModel)]="checkboxModel.middle" mdbCheckbox mdbWavesEffect>
                  Checkbox 2
              </label>
              <label mdbBtn color="pink" rounded="true" class="form-check-label" [(ngModel)]="checkboxModel.right" mdbCheckbox mdbWavesEffect>
                  Checkbox 3
              </label>
            </div>
            <!--Rounded checkbox buttons-->
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
                selector: 'rounded-checkbox-buttons',
                templateUrl: './rounded-checkbox-buttons.html'
            })
            export class RoundedCheckboxButtonsComponent {
              checkboxModel: any = { left: true, middle: false, right: false };
            }

Rounded checkbox buttons with icons MDB Pro component 

        
            
            <!--Rounded checkbox buttons with icons-->
            <div class="btn-group">
              <label mdbBtn color="warning" rounded="true" class="form-check-label" [(ngModel)]="checkboxModel.left" mdbCheckbox mdbWavesEffect>
                  Checkbox 1 (pre-checked)
                  <mdb-icon far icon="gem" class="ml-2"></mdb-icon>
              </label>
              <label mdbBtn color="warning" rounded="true" class="form-check-label" [(ngModel)]="checkboxModel.middle" mdbCheckbox mdbWavesEffect>
                  Checkbox 2
                  <mdb-icon fas icon="user" class="ml-2"></mdb-icon>
              </label>
              <label mdbBtn color="warning" rounded="true" class="form-check-label" [(ngModel)]="checkboxModel.right" mdbCheckbox mdbWavesEffect>
                  Checkbox 3
                  <mdb-icon fas icon="code" class="ml-2"></mdb-icon>
              </label>
            </div>
            <!--Rounded checkbox buttons with icons-->
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
                selector: 'checkbox-buttons-with-icons',
                templateUrl: './checkbox-buttons-with-icons.html'
            })
            export class CheckboxButtonsWithIconsComponent {
              checkboxModel: any = { left: true, middle: false, right: false };
            }