Edit these docs Rate these docs

React Bootstrap Switch MDB Pro component

React Switch - Bootstrap 4 & Material Design

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 (
                  <>
                    <label className="bs-switch">
                      <input checked type="checkbox" readOnly />
                      <span className="slider round" />
                    </label>
                    <label className="bs-switch">
                      <input type="checkbox" />
                      <span className="slider round" />
                    </label>
                  </>
                );
              }

              export default App;
          

Material switch

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 {

            render() {
              return (
                  <label className="bs-switch">
                    <input checked type="checkbox" onChange={()=> false} />
                    <span className="slider round" />
                  </label>
                );
              }
            }

            export default App;
          

Material switch


              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 (
                  <label className="bs-switch">
                    <input type="checkbox" disabled />
                    <span className="slider round" />
                  </label>
                );
              }

              export default App;
          

Material switch


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

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

            export default App;
          

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Edit these docs Rate these docs

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} />