Vue Bootstrap Switch

Vue Switch - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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 v-model="switchValue" />
            </template>
            
        
    
        
            
            <script>
              import {
                mdbSwitch
              } from 'mdbvue';
              export default {
                name: 'SelectPage',
                components: {
                  mdbSwitch
                },
                data() {
                  return {
                    switchValue: false
                  }
                }
              }
            </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 v-model="switchValue" />
            </template>
            
        
    
        
            
            <script>
              import {
                mdbSwitch
              } from 'mdbvue';
              export default {
                name: 'SelectPage',
                components: {
                  mdbSwitch
                },
                data() {
                  return {
                    switchValue: true
                  }
                }
              }
            </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 v-model="switchValue" />
            </template>
            
        
    
        
            
            <script>
              import {
                mdbSwitch
              } from 'mdbvue';
              export default {
                name: 'SelectPage',
                components: {
                  mdbSwitch
                },
                data() {
                  return {
                    switchValue: false
                  }
                }
              }
            </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

        
            
      <script>
        import {
          mdbSwitch
        } from 'mdbvue';
      </script>

API Reference: Properties

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

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 @getValue="getSwitchValue" />