Rate this 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, { Component, Fragment } from "react";

              class App extends Component {

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

                  );
                }
              }

              export default App;

          

Material switch

Material Design styling for Bootstrap Switch component


              import React, { Component, Fragment } from "react";
              import { InputSwitch } 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 (
                    <Fragment>
                      <InputSwitch checked={this.state.switch1} onChange={this.handleSwitchChange}  />
                      <InputSwitch checked={this.state.switch2} onChange={this.handleSwitchChange}  />
                    </Fragment>
                  );
                }
              }

              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" />
                      <span className="slider round" />
                    </label>
                  );
                }
              }

              export default App;

          

Material switch


              import React, { Component } from "react";
              import { InputSwitch } from "mdbreact";

              class App extends Component {
                state = {
                  switch1: true,
                }

                handleSwitchChange = (nr) => {
                  let switchNumber = `switch${nr}`;
                  this.setState({
                    [switchNumber]: !this.state[switchNumber]
                  });
                }

                render() {
                  return (
                      <InputSwitch checked={this.state.switch1} onChange={this.handleSwitchChange}  />
                  );
                }
              }

              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, { Component } from "react";

              class App extends Component {

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

              export default App;

          

Material switch



              import React, { Component } from "react";
              import { InputSwitch } from "mdbreact";

              class App extends Component {

                render() {
                  return (
                      <InputSwitch 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 />

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