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
                  #switch
                  mdbCheckbox
                  class="form-check-input"
                  type="checkbox"
                  value=""
                  id="flexSwitchCheckDefault"
                />
                <label class="form-check-label" for="flexSwitchCheckDefault"> Default switch </label>
              </div>
            

              @ViewChild('switch') switch: MdbCheckboxDirective;

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