Angular Bootstrap switch

Angular Switch - Bootstrap 4 & Material Design

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

Default switch

Default styling for Angular Bootstrap Switch component



            <!-- Default switch -->
            <label class="bs-switch">
              <input type="checkbox">
              <span class="slider round"></span>
            </label>

Material switch MDB Pro component

Material Design styling for Angular Bootstrap Switch component



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

Checked state

Add checked attribute to the <input> element to pre-select switch when the page loads.

The checked attribute is a boolean attribute.

Default switch 



            <!-- Default checked -->
            <label class="bs-switch">
              <input type="checkbox" checked>
              <span class="slider round"></span>
            </label>

Material switch MDB Pro component 



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

Disabled state

Add the disabled boolean attribute to the <input> and the custom indicator and label description will be automatically styled and blocked.

A disabled <input> element is unusable and un-clickable.

Default switch 



            <!-- Default disabled -->
            <label class="bs-switch">
              <input type="checkbox" disabled>
              <span class="slider round"></span>
            </label>

Material switch MDB Pro component 



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

Angular Switch - API

In this section you will find informations about required modules of switch 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 { WavesModule, ButtonsModule, CardsFreeModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { WavesModule, ButtonsModule, CardsFreeModule } from 'angular-bootstrap-md'
Import example Modules list

Angular Switch - examples & customization

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?


<mdb-card>
  <mdb-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 mdbBtn color="primary" rounded="true" class="waves-light" mdbWavesEffect>Sign up</button>
      </div>

    </form>
    <!-- Form register -->
  </mdb-card-body>
</mdb-card>