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>
24H 00M 00S

Get one of the limited daily offers for AI Bundles with 98% OFF for our Black Days Sale!

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(); } }