Rate this docs

Angular Bootstrap checkbox

Angular Checkbox - Bootstrap 4 & Material Design

Angular Bootstrap checkbox is a component used for allowing a user to make a multiple choice. 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 [checked]="true" input to 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 [indeterminate]="true" input to set 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 the [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 [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>

             

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>
  
        

  
            .checkbox-teal [type="checkbox"]:checked+label:before {
              border-color: transparent #009688 #009688 transparent;
            }
  
            .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 {

                public checkboxModel: any = { left: true, middle: false, right: false };

            }

        

Rounded checkbox buttons MDB Pro component


  
          <!--Rounded checkbox buttons-->
          <div class="btn-group">
            <label mdbBtn class="btn btn-pink btn-rounded active btn-md form-check-label" [(ngModel)]="checkboxModel.left" mdbCheckbox mdbWavesEffect>
                Checkbox 1 (pre-checked)
            </label>
            <label mdbBtn class="btn btn-pink btn-rounded btn-md form-check-label" [(ngModel)]="checkboxModel.middle" mdbCheckbox mdbWavesEffect>
                Checkbox 2
            </label>
            <label mdbBtn class="btn btn-pink btn-rounded btn-md 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 {

                public 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 class="btn btn-warning btn-rounded active btn-md form-check-label" [(ngModel)]="checkboxModel.left" mdbCheckbox mdbWavesEffect>
                Checkbox 1 (pre-checked)
                <i class="fa fa-diamond ml-2"></i>
            </label>
            <label mdbBtn class="btn btn-warning btn-rounded btn-md form-check-label" [(ngModel)]="checkboxModel.middle" mdbCheckbox mdbWavesEffect>
                Checkbox 2
                <i class="fa fa-user ml-2"></i>
            </label>
            <label mdbBtn class="btn btn-warning btn-rounded btn-md form-check-label" [(ngModel)]="checkboxModel.right" mdbCheckbox mdbWavesEffect>
                Checkbox 3
                <i class="fa fa-code ml-2"></i>
            </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 {

                public checkboxModel: any = { left: true, middle: false, right: false };

            }