Vue Bootstrap Switch

Vue Switch - Bootstrap 4 & Material Design

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

It's mostly used in a number of various forms since they are dead simple to use and cut the time one needs to fill all the inputs.

Examples of Bootstrap switch use:

  • Forms
  • On/Off Functionality
  • Preference choice

Default switch

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.


            <template>
              <!-- Default switch -->
              <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="customSwitches">
                <label class="custom-control-label" for="customSwitches">Toggle this switch element</label>
              </div>
          

Material switch MDB Pro component

Material Design styling for Bootstrap Switch component


            <template>
              <!-- Material switch -->
              <mdb-switch />
            </template>
          

            <script>
              import { mdbSwitch } from 'mdbvue';
              export default {
                name: 'SelectPage',
                components: {
                  mdbSwitch
                }
              }
            </script>
          

Checked state

Add checked attribute to the <input> element to pre-select switch when the page loads.

The checked attribute is a boolean attribute.

Default switch


            <template>
              <!-- Default checked -->
              <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="customSwitch1" checked>
                <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
              </div>
            </template>
          

Material switch MDB Pro component


            <template>
              <!-- Material checked -->
              <mdb-switch checked />
            </template>
          

            <script>
              import { mdbSwitch } from 'mdbvue';
              export default {
                name: 'SelectPage',
                components: {
                  mdbSwitch
                }
              }
            </script>
          

Disabled state

Add the disabled boolean attribute to the <input> and the custom indicator and label description will be automatically styled and blocked.

A disabled <input> element is unusable and un-clickable.

Default switch


            <template>
              <!-- Default disabled -->
              <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="customSwitch2" disabled>
                <label class="custom-control-label" for="customSwitch2">Toggle this switch element</label>
              </div>
            </template>
          

Material switch MDB Pro component


            <template>
              <!-- Material disabled -->
              <mdb-switch disabled />
            </template>
          

            <script>
              import { mdbSwitch } from 'mdbvue';
              export default {
                name: 'SelectPage',
                components: {
                  mdbSwitch
                }
              }
            </script>
          

Switch - API

In this section you will find advanced information about the Switch component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use to work with it.


Import statement


          import { mdbSwitch } from 'mdbvue';
      

API Reference: Properties

Name Type Default Description Example
checked Boolean false Turn the switch on <mdb-switch-input checked ... />
disabled Boolean false Disable input <mdb-switch-input disabled ... />
classes String Override or extend the styles applied to the component. <mdb-switch-input classes="..." ... />
offLabel String Off Label for false event <mdb-switch-input offLabel="Off" ... />
onLabel String On Label for false event <mdb-switch-input onLabel="On" ... />

API Reference: Methods

Name Parameters Description Example
v-on:getValue value Returns input value. Use this method instead of v-model to handle input value changes. <mdb-switch-input @getValue="getSwitchValue" />