Switch

Bootstrap switch / Bootstrap toggle

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

Bootstrap switch/toggle 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 very 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 -->
            <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 -->
            <div class="switch">
              <label>
                Off
                <input type="checkbox">
                <span class="lever"></span> On
              </label>
            </div>

          
        
    

Checked state

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

The checked attribute is a boolean attribute.

        
            

            <!-- 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>
          
        
    

        
            

            <!-- Material checked -->
            <div class="switch">
              <label>
                Off
                <input type="checkbox" checked>
                <span class="lever"></span> On
              </label>
            </div>

          
        
    

Disabled state

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

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

        
            

            <!-- 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>
          
        
    

        
            

            <!-- Material disabled -->
            <div class="switch">
              <label>
                Off
                <input type="checkbox" disabled>
                <span class="lever"></span> On
              </label>
            </div>