Angular Bootstrap Switch

Angular Bootstrap switch is a simple component used for activating one of two predefined options. Commonly used as an on/off button.

It's mostly used in a number of various forms since they are dead simple to use and cut the time one needs to fill all the inputs.

Examples of Angular Bootstrap switch use:

  • Forms
  • On/Off Functionality
  • Preference choice

See the following Angular Bootstrap switch examples:


Basic switch MDB Pro component


    <!-- Switch -->
<div class="switch">
  <label>
    Off
    <input type="checkbox">
    <span class="lever"></span>
    On
  </label>
</div>

<!-- Disabled Switch -->
<div class="switch">
  <label>
    Off
    <input disabled type="checkbox">
    <span class="lever"></span>
    On
  </label>
</div>
      

Basic switch colors variations MDB Pro component

Add one of the following classes:

  • .primary-switch
  • .secondary-switch
  • .default-switch
  • .info-switch
  • .warning-switch
  • .danger-switch
  • .success-switch
  • .blue-white-switch
  • .teal-switch
  • .pink-switch
  • .amber-switch
  • .blue-switch
  • .indigo-switch
  • .mdb-color-switch

<!-- Switch -->
<div class="switch  mdb-color-switch">
  <label>
    Off
    <input type="checkbox">
    <span class="lever"></span>
    On
  </label>
</div>
      

.switch.primary-switch label input[type=checkbox]:checked + .lever {
    background-color: #689DF6;
}
.switch.primary-switch label input[type=checkbox]:checked + .lever:after {
    background-color: #4285F4;
}
.switch.default-switch label input[type=checkbox]:checked + .lever {
    background-color: #4DCCBF;
}
.switch.default-switch label input[type=checkbox]:checked + .lever:after {
    background-color: #2BBBAD;
}
.switch.secondary-switch label input[type=checkbox]:checked + .lever {
    background-color: #C791E2;
}
.switch.secondary-switch label input[type=checkbox]:checked + .lever:after {
    background-color: #a6c;
}
.switch.success-switch label input[type=checkbox]:checked + .lever {
    background-color: #2ACC6C;
}
.switch.success-switch label input[type=checkbox]:checked + .lever:after {
    background-color: #00C851;
}
.switch.info-switch label input[type=checkbox]:checked + .lever {
    background-color: #59C3EB;
}
.switch.info-switch label input[type=checkbox]:checked + .lever:after {
    background-color: #33b5e5;
}
.switch.warning-switch label input[type=checkbox]:checked + .lever {
    background-color: #FFA339;
}
.switch.warning-switch label input[type=checkbox]:checked + .lever:after {
    background-color: #F80;
}
.switch.danger-switch label input[type=checkbox]:checked + .lever {
    background-color: #FF606F;
}
.switch.danger-switch label input[type=checkbox]:checked + .lever:after {
    background-color: #ff3547;
}
.switch.teal-switch label input[type=checkbox]:checked + .lever {
    background-color: #b2dfdb;
}
.switch.teal-switch label input[type=checkbox]:checked + .lever:after {
    background-color: #80cbc4;
}
.switch.pink-switch label input[type=checkbox]:checked + .lever {
    background-color: #f8bbd0;
}
.switch.pink-switch label input[type=checkbox]:checked + .lever:after {
    background-color: #f48fb1;
}
.switch.blue-switch label input[type=checkbox]:checked + .lever {
    background-color: #b3e5fc;
}
.switch.blue-switch label input[type=checkbox]:checked + .lever:after {
    background-color: #81d4fa;
}
.switch.amber-switch label input[type=checkbox]:checked + .lever {
    background-color: #ffe082;
}
.switch.amber-switch label input[type=checkbox]:checked + .lever:after {
    background-color: #ffd54f;
}
.switch.mdb-color-switch label input[type=checkbox]:checked + .lever {
    background-color: #618FB5;
}
.switch.mdb-color-switch label input[type=checkbox]:checked + .lever:after {
    background-color: #3F729B;
}
.switch.indigo-switch label input[type=checkbox]:checked + .lever {
    background-color: #9fa8da;
}
.switch.indigo-switch label input[type=checkbox]:checked + .lever:after {
    background-color: #7986cb;
}
.switch.blue-white-switch label input[type=checkbox]:checked + .lever {
    background-color: #2196f3;
}
.switch.blue-white-switch label input[type=checkbox]:checked + .lever:after {
    background-color: #fff;
}
.switch.blue-white-switch label .lever  {
    background-color: #ccc;
}
.switch.blue-white-switch label .lever:after {
    background-color: #fff;
}
	

Switch with different shapes MDB Pro component

Switch without labels


<!-- Switch -->
<div class="switch square">
  <label>
    Off
    <input type="checkbox">
    <span class="lever"></span>
    On
  </label>
</div>
      

.switch.round label .lever {
    width: 54px;
    height: 34px;
    border-radius: 10em;
}
.switch.round label .lever:after {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    left: 4px;
    top: 4px;
}
.switch.square label .lever {
    width: 54px;
    height: 34px;
    border-radius: 0px;
}
.switch.square label .lever:after {
    width: 26px;
    height: 26px;
    border-radius: 0px;
    left: 4px;
    top: 4px;
}
	

Switch within form MDB Pro component

Sign up

Would you like to receive our newsletter?


<div class="card">
  <div class="card-body">
    <!-- Form register -->
    <form>
      <p class="h3 text-center my-4 blue-text">Sign up</p>

      <div class="md-form">
        <i class="fa fa-user prefix grey-text"></i>
        <input type="text" id="orangeForm-name" class="form-control" mdbInputDirective>
        <label for="orangeForm-name">Your name</label>
      </div>
      <div class="md-form">
        <i class="fa fa-envelope prefix grey-text"></i>
        <input type="text" id="orangeForm-email" class="form-control" mdbInputDirective>
        <label for="orangeForm-email">Your email</label>
      </div>

      <div class="md-form">
        <i class="fa fa-lock prefix grey-text"></i>
        <input type="password" id="orangeForm-pass" class="form-control" mdbInputDirective>
        <label for="orangeForm-pass">Your password</label>
      </div>

      <div class="col-md-12 text-center">

        <p class="font-small text-muted">Would you like to receive our newsletter?</p>

        <!-- Switch -->
        <div class="switch primary-switch text-muted font-small">
          <label>
            No
            <input type="checkbox" checked="checked">
            <span class="lever"></span>
            Yes
          </label>
        </div>

      </div>

      <div class="text-center my-3">
        <button class="btn btn-primary btn-rounded waves-light" mdbWavesEffect>Sign up</button>
      </div>

    </form>
    <!-- Form register -->
  </div>
</div>
      

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