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
className String '' Add custom class to MDBSwitch <MDBSwitch className="class" />
disabled Boolean false Makes the MDBSwitch disabled <MDBSwitch disabled />
name String '' Specifies the name for the MDBSwitch <MDBSwitch name="sampleName" label="Example label" id="inputExample" />
id String '' Defines an id for the MDBSwitch <MDBSwitch label="Example label" id="inputExample" />
label String '' Defines a label text for the MDBSwitch <MDBSwitch label="Example label" id="inputExample" />
labelId String '' Defines an id for the label <MDBSwitch label="Example label" labelId="exampleLabel" id="fileExample" />
labelClass String '' Adds custom classes to the label <MDBSwitch label="Example label" labelId="exampleLabel" labelClass="test-class" id="fileExample" />