Toggle Switch

Vue Bootstrap 5 Toggle Switch

Vue 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. Switches also support the disabled attribute. 




        
            
            <template>
              <MDBSwitch
                label="Default switch checkbox input"
                v-model="switch1"
              />
              <MDBSwitch
                label="Checked switch checkbox input"
                v-model="switch2"
              />
              <MDBSwitch
                disabled
                label="Disabled switch checkbox input"
                v-model="switch3"
              />
              <MDBSwitch
                disabled
                label="Disabled checked switch checkbox input"
                v-model="switch4"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBSwitch } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBSwitch
                },
                setup() {
                  const switch1 = ref(false);
                  const switch2 = ref(true);
                  const switch3 = ref(false);
                  const switch4 = ref(true);
                  
                  return {
                    switch1,
                    switch2,
                    switch3,
                    switch4
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBSwitch } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const switch1 = ref(false);
              const switch2 = ref(true);
              const switch3 = ref(false);
              const switch4 = ref(true);              
            </script>

Toggle Switch - API

Import

        
            
          <script>
            import {
              MDBSwitch
            } from 'mdb-vue-ui-kit';
          </script>

Properties

Property Type Default Description
id String unique random id Changes input id
inputClass String "" Adds input classes
label String "" Changes input label
labelClass String "" Adds input label classes
tag String "div" Changes input wrapper tag
v-model Boolean "" Changes input value with two-way data binding
wrapperClass String "" Adds input wrapper classes