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.

Default switch checkbox input

Checked switch checkbox input

Disabled switch checkbox input

Disabled checked switch checkbox input

Show code

template
script
script

TypeScript

<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