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


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

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

Colorful filled-in checkbox MDB Pro component


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

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

Colorful rounded checkbox MDB Pro component


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

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

Classic checkbox buttons


<div class="btn-group">
    <label class="btn btn-primary waves-light active" [(ngModel)]="checkModel.left" mdbCheckbox mdbWavesEffect>
        Checkbox 1 (pre-checked)
    </label>
    <label class="btn btn-primary waves-light" [(ngModel)]="checkModel.middle" mdbCheckbox mdbWavesEffect>
        Checkbox 2
    </label>
    <label class="btn btn-primary waves-light" [(ngModel)]="checkModel.right" mdbCheckbox mdbWavesEffect>
        Checkbox 3
    </label>
</div>

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 } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { ButtonsModule, WavesModule } from 'angular-bootstrap-md'