Toggle Switch

Angular Bootstrap 5 Toggle Switch component

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

Basic example

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Add mdbCheckbox directive to the input element to use all switch features. 




        
            
            <!-- Default switch -->
            <div class="form-check form-switch">
              <input
                mdbCheckbox
                class="form-check-input"
                type="checkbox"
                id="flexSwitchCheckDefault"
              />
              <label class="form-check-label" for="flexSwitchCheckDefault"
                >Default switch checkbox input</label
              >
            </div>
            <!-- Checked switch -->
            <div class="form-check form-switch">
              <input
                mdbCheckbox
                class="form-check-input"
                type="checkbox"
                id="flexSwitchCheckChecked"
                [checked]="true"
              />
              <label class="form-check-label" for="flexSwitchCheckChecked"
                >Checked switch checkbox input</label
              >
            </div>
            <!-- Default disabled switch -->
            <div class="form-check form-switch">
              <input
                mdbCheckbox
                class="form-check-input"
                type="checkbox"
                id="flexSwitchCheckDisabled"
                [disabled]="true"
              />
              <label class="form-check-label" for="flexSwitchCheckDisabled"
                >Disabled switch checkbox input</label
              >
            </div>
            <!-- Checked disabled switch -->
            <div class="form-check form-switch">
              <input
                mdbCheckbox
                class="form-check-input"
                type="checkbox"
                id="flexSwitchCheckCheckedDisabled"
                [checked]="true"
                [disabled]="true"
              />
              <label class="form-check-label" for="flexSwitchCheckCheckedDisabled"
                >Disabled checked switch checkbox input</label
              >
            </div>

Toggle Switch - API

Import

        
            
          import { MdbCheckboxModule } from 'mdb-angular-ui-kit/checkbox';
          …
          @NgModule ({
            ...
            imports: [MdbCheckboxModule],
            ...
          })

Inputs

Name Type Default Description
checked Boolean false Changes switch checked state
disabled Boolean false Changes switch disabled state
value any - Changes switch value

Methods

Name Description Example
toggle Manually toggle a switch switch.toggle() 
        
            
                <div class="form-check form-switch">
                  <input
                    mdbCheckbox
                    class="form-check-input"
                    type="checkbox"
                    value=""
                    id="flexSwitchCheckDefault"
                  />
                  <label class="form-check-label" for="flexSwitchCheckDefault"> Default switch </label>
                </div>
              
        
    
        
            
                import { Component, ViewChild, OnInit } from '@angular/core';
                import { MdbCheckboxDirective } from 'mdb-angular-ui-kit/checkbox';

                @Component({
                  selector: 'app-root',
                  templateUrl: './app.component.html',
                })
                export class AppComponent implements OnInit {
                  @ViewChild(MdbCheckboxDirective, { static: true }) switch!: MdbCheckboxDirective;

                  ngOnInit(): void {
                    this.switch.toggle();
                  }
                }