Angular Bootstrap Checkbox

Angular Bootstrap checkbox is a component used for allowing a user to make a binary choice. Broadly used in the forms and surveys.

Because of their high UX value, Checkboxes are usually present in a crowded UI designs. Thanks to the flexibility of Bootstrap, they are always perfectly positioned with an obvious use purpose.

Examples of Bootstrap checbox use:

Busy personal information form
Preference survey
Single choice questionary

Classic and filled-in checkbox MDB Pro component

<div class="form-check">
    <input class="form-check-input" mdbInputDirective type="checkbox" id="checkbox1">
    <label class="form-check-label" for="checkbox1">Classic checkbox</label>
</div>

<div class="form-check">
    <input class="form-check-input" mdbInputDirective type="checkbox" class="form-check-input filled-in" id="checkbox2">
    <label class="form-check-label" for="checkbox2">Filled-in checkbox</label>
</div>

Disabled checkbox MDB Pro component

<div class="form-check">
    <input class="form-check-input" mdbInputDirective type="checkbox" id="checkbox1">
    <label class="form-check-label" for="checkbox1">Classic checkbox</label>
</div>

<div class="form-check">
    <input class="form-check-input" mdbInputDirective type="checkbox" class="form-check-input filled-in" id="checkbox2">
    <label class="form-check-label" for="checkbox2">Filled-in checkbox</label>
</div>

Inline checkbox MDB Pro component

<form class="form-inline">
  <div class="form-check mr-3">
      <input class="form-check-input" type="checkbox" id="checkbox11" checked="checked" mdbInputDirective>
      <label class="form-check-label" for="checkbox11">Classic checkbox</label>
  </div>
  <div class="form-check mr-3">
      <input class="form-check-input" type="checkbox" class="form-check-input filled-in" id="checkbox22" checked="checked" mdbInputDirective>
      <label class="form-check-label" for="checkbox22">Filled-in checkbox</label>
  </div>
  <div class="form-check mr-3">
      <input class="form-check-input" type="checkbox" id="checkbox33" checked="checked" mdbInputDirective>
      <label class="form-check-label" for="checkbox33">Classic checkbox</label>
  </div>
</form>

Colorful classic checkbox MDB Pro component

Teal



      
      Classic checkbox


.checkbox-teal [type="checkbox"]:checked+label:before {
    border-color: transparent #009688 #009688 transparent;
}

Colorful filled-in checkbox MDB Pro component

Warning



    
    Filled-in warning checkbox


.checkbox-warning-filled [type="checkbox"][class*='filled-in']:checked+label:after {
    border-color: #FF8800;
    background-color: #FF8800;
}

Colorful rounded checkbox MDB Pro component

Success



    
    Filled-in rounded checkbox


.checkbox-rounded [type="checkbox"][class*='filled-in']+label:after {
    border-radius: 50%;
}

Classic checkbox buttons

Checkbox 1 (pre-checked) Checkbox 2 Checkbox 3



    
        Checkbox 1 (pre-checked)
    
    
        Checkbox 2
    
    
        Checkbox 3


export class AppComponent {
  public checkModel: any = { left: true, middle: false, right: false };
}

API Reference:

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.

API Reference for MDB Angular Checkbox:

// MDB Angular Pro
import { ButtonsModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'

// MDB Angular Free
import { ButtonsModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md'

Import example Modules list