React Bootstrap Switch

React Switch - Bootstrap 4 & Material Design

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 50% 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.
get 50% discount on MDB5 PRO

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.

Basic examples

Default styling for Bootstrap Switch component

        
            
            import React from 'react';

            const App = () => {
              return (
                <>
                  <div className='custom-control custom-switch'>
                    <input
                      type='checkbox'
                      className='custom-control-input'
                      id='customSwitches'
                      readOnly
                    />
                    <label className='custom-control-label' htmlFor='customSwitches'>
                      Toggle this switch element
                    </label>
                  </div>

                  <div className='custom-control custom-switch'>
                    <input
                      type='checkbox'
                      className='custom-control-input'
                      id='customSwitchesChecked'
                      defaultChecked
                    />
                    <label className='custom-control-label' htmlFor='customSwitchesChecked'>
                      Toggle this switch element
                    </label>
                  </div>
                </>
              );
            };

            export default App;

Material switch MDB Pro component

Material Design styling for Bootstrap Switch component

        
            
        import React, { Component } from "react";
        import { MDBSwitch } from "mdbreact";
        
        class App extends Component {
          state = {
            switch1: true,
            switch2: false,
          };
        
          handleSwitchChange = (nr) => () => {
            let switchNumber = `switch${nr}`;
            this.setState({
              [switchNumber]: !this.state[switchNumber],
            });
          };
        
          render() {
            return (
              <>
                <MDBSwitch
                  checked={this.state.switch1}
                  onChange={this.handleSwitchChange(1)}
                />
                <MDBSwitch
                  checked={this.state.switch2}
                  onChange={this.handleSwitchChange(2)}
                />
              </>
            );
          }
        }
        
        export default App;

Checked state

Add checked prop to the <Input> component to pre-select switch when the page loads. The checked prop is a boolean attribute.

Default switch 

        
            
            import React, { Component } from 'react';

            class App extends Component {
              state = {
                switch1: true,
              }
              handleSwitchChange = nr => () => {
                let switchNumber = `switch${nr}`;
                this.setState({
                  [switchNumber]: !this.state[switchNumber]
                });
              }

              render() {
                return (
                  <div className='custom-control custom-switch'>
                    <input
                      type='checkbox'
                      className='custom-control-input'
                      id='customSwitches'
                      checked={this.state.switch1}
                      onChange={this.handleSwitchChange(1)}
                      readOnly
                    />
                    <label className='custom-control-label' htmlFor='customSwitches'>
                      Toggle this switch element
                    </label>
                  </div>
                );
              }
            }

            export default App;

Material switch MDB Pro component 

        
            
        import React, { Component } from "react";
        import { MDBSwitch } from "mdbreact";
        
        class App extends Component {
          state = {
            switch1: true,
          };
        
          handleSwitchChange = (nr) => () => {
            let switchNumber = `switch${nr}`;
            this.setState({
              [switchNumber]: !this.state[switchNumber],
            });
          };
        
          render() {
            return (
              <MDBSwitch
                checked={this.state.switch1}
                onChange={this.handleSwitchChange(1)}
              />
            );
          }
        }
        
        export default App;

Disabled state

Add the disabled boolean attribute to the <Input> component and the custom indicator and label description will be automatically styled and blocked. A disabled <Input> component is unusable and un-clickable.

Default switch 

        
            
            import React from 'react';

            const App = () => {
              return (
                <div className='custom-control custom-switch'>
                  <input
                    type='checkbox'
                    className='custom-control-input'
                    id='customSwitches'
                    disabled
                  />
                  <label className='custom-control-label' htmlFor='customSwitches'>
                    Toggle this switch element
                  </label>
                </div>
              );
            };

            export default App;

Material switch MDB Pro component 

        
            
            import React from "react";
            import { MDBSwitch } from "mdbreact";

            const App = () => {
              return (
                <MDBSwitch disabled />
              );
            }

            export default App;

React Switch - API

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

Switch import statement

In order to use Switch component make sure you have imported proper module first.

        
            
          import { MDBSwitch } from "mdbreact";

API Reference: Properties

The table below shows the configuration options of the MDBSwitch component.

Name Type Default Description Example
checked Boolean false Sets the initial state of switch to ON <MDBSwitch checked />
className String Adds custom classes <MDBSwitch className="customClass" />
disabled Boolean false Disables the Switch component <MDBSwitch disabled />
labelLeft String On Sets the left label of the switch <MDBSwitch labelLeft="No" />
labelRight String Off Sets the right label of the switch <MDBSwitch labelRight="Yes" />

API Reference: Methods

The table below shows the methods which you can use with MDBSwitch component.

Name Parameters Description Example
getValue Returns MDBSwitch value on change <MDBSwitch getValue={this.handleChange} />