Toggle Switch

React Bootstrap 5 Toggle Switch component

A switch is a simple component used for activating one of two predefined options. Commonly used as an on/off button.

Basic example

A switch uses the MDBSwitch component to render a toggle switch. Switches also support the disabled prop. 




        
            
            import React from 'react';
            import { MDBSwitch } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <>
                  <MDBSwitch id='flexSwitchCheckDefault' label='Default switch checkbox input' />
                  <br />
                  <MDBSwitch defaultChecked id='flexSwitchCheckChecked' label='Checked switch checkbox input' />
                  <br />
                  <MDBSwitch disabled id='flexSwitchCheckDisabled' label='Disabled switch checkbox input' />
                  <br />
                  <MDBSwitch
                    defaultChecked
                    disabled
                    id='flexSwitchCheckCheckedDisabled'
                    label='Disabled checked switch checkbox input'
                  />
                </>
              );
            }

Toggle Switch - API

Import

        
            
            import { MDBSwitch } from 'mdb-react-ui-kit';

Properties

MDBSwitch

Name Type Default Description Example
btn boolean '' Makes a button from the MDBSwitch <MDBSwitch btn label="Example label" id="switchExample" />
btnColor string '' Allows to set the color of the button switch <MDBSwitch btn btnColor="secondary" label="Example label" id="switchExample" />
className string '' Adds custom class to the MDBSwitch <MDBSwitch className="class" label="Example label" id="inputExample" />
checked boolean '' Defines whether the switch is checked <MDBSwitch defaultChecked label="Example label" id="switchExample" />
defaultChecked boolean '' Makes the MDBSwitch checked by default <MDBSwitch defaultChecked label="Example label" id="switchExample" />
disabled string '' Makes the MDBSwitch disabled <MDBSwitch disabled label="Example label" id="switchExample" />
disableWrapper boolean false Disables input wrapper <MDBSwitch disableWrapper />
id string '' Defines an id for the MDBSwitch <MDBSwitch label="Example label" id="inputExample" />
inline boolean '' Places the MDBSwitch in one row <MDBSwitch inline label="Example label" id="switchExample" />
inputRef React.RefObject undefined Reference to input element <MDBSwitch inputRef={inputReference} />
label React.ReactNode '' Defines a label content for the MDBSwitch <MDBSwitch label="Example label" id="inputExample" />
labelId string '' Defines an id for the label <MDBSwitch label="Example label" labelId="exampleLabel" id="switchExample" />
labelClass string '' Adds custom classes to the label <MDBSwitch label="Example label" labelId="exampleLabel" labelClass="test-class" id="switchExample" />
labelStyle React.CSSProperties undefined Adds custom styles to the label <MDBSwitch label="Example label" labelStyle={{color: 'red'}} />
name string '' Specifies the name for the MDBSwitch <MDBSwitch name="sampleName" label="Example label" id="inputExample" />
value string '' Sets the value for the MDBSwitch <MDBSwitch value="Example value" label="Example label" id="inputExample" />
wrapperTag string '' Defines a tag type for the wrapper of the MDBSwitch <MDBSwitch label="Example label" wrapperTag="span" id="exampleID" />
wrapperClass string '' Adds custom classes to the wrapper of the MDBSwitch <MDBSwitch wrapperClass="custom-class" label="Example label" id="switchExample" />
wrapperStyle React.CSSProperties undefined Adds custom styles to the wrapper <MDBSwitch label="Example label" wrapperStyle={{color: 'red'}} />