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