Edit these docs

Angular Bootstrap Switch

Angular switch / toggle - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

The switch/toggle 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

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.



            <!-- Default switch -->
            <div class="custom-control custom-switch">
              <input type="checkbox" class="custom-control-input" id="customSwitches">
              <label class="custom-control-label" for="customSwitches">Toggle this switch element</label>
            </div>

Material switch MDB Pro component

Material Design styling for a 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 -->
            <div class="custom-control custom-switch">
              <input type="checkbox" class="custom-control-input" id="customSwitch1" checked>
              <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
            </div>

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 the label description will be automatically styled and blocked.

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

Default switch 



            <!-- Default disabled -->
            <div class="custom-control custom-switch">
              <input type="checkbox" class="custom-control-input" id="customSwitch2" disabled>
              <label class="custom-control-label" for="customSwitch2">Toggle this switch element</label>
            </div>

Material switch MDB Pro component 



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

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
Edit these docs

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">
        <mdb-icon fas icon="user" class="prefix grey-text"></mdb-icon>
        <input type="text" id="orangeForm-name" class="form-control" mdbInput>
        <label for="orangeForm-name">Your name</label>
      </div>
      <div class="md-form">
        <mdb-icon fas icon="envelope" class="prefix grey-text"></mdb-icon>
        <input type="text" id="orangeForm-email" class="form-control" mdbInput>
        <label for="orangeForm-email">Your email</label>
      </div>

      <div class="md-form">
        <mdb-icon fas icon="lock" class="prefix grey-text"></mdb-icon>
        <input type="password" id="orangeForm-pass" class="form-control" mdbInput>
        <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>