Hello Everyone, In this tutorial, We are gonna take a look at checkbox toggle button in salesforce lightning component. After going through this example you will able to create a toggle button very easily in any lightning component. So without wasting time, let’s get started,

Toggle button in the lightning component

Step 1: Login to your Salesforce Org. and open developer console. 

Step 2: Navigate to File | New | Lightning Component and create a Lightning Component called ToggleButton. Replace the following markup in the Lightning Component.

 Method 1

 ToggleButton.cmp
 <aura:component implements="flexipage:availableForRecordHome" access="global">
    <aura:attribute name="chkboxvalue" type="boolean"/>    
    <div class="slds-m-around--large">
        <div class="slds-form-element">
            <label class="slds-checkbox_toggle slds-grid">
                <span class="slds-form-element__label slds-m-bottom_none">Toggle Button Label </span>
                <ui:inputCheckbox aura:id="chkbox" class="slds-input" change="{!c.getButtonValue}"/>
                <span id="toggle-desc" class="slds-checkbox_faux_container" aria-live="assertive">
                    <span class="slds-checkbox_faux"></span>
                    <span class="slds-checkbox_on">Enabled</span>
                    <span class="slds-checkbox_off">Disabled</span>
                </span>
            </label>
            <p><b>Toggle value is {!v.chkboxvalue} </b></p>
        </div> 
    </div> 
 </aura:component>
ToggleButtonController.js 
 ({
    getButtonValue:function(component,event,helper){
        var checkCmp = component.find("chkbox").get("v.value");
        component.set("v.chkboxvalue",checkCmp);
    },
 })
Output:

 Method 2

ToggleButton.cmp
 <aura:component implements="flexipage:availableForRecordHome" access="global">
    <aura:attribute name="chkboxvalue" type="boolean"/> 
     <lightning:input type="toggle" name="toggleButton" aura:id="tglbtn" label="Toggle Button Label" 
                 messageToggleActive="I am Enable Now!" messageToggleInactive="I am Disable Now!" 
                 onchange="{!c.getToggleButtonValue}"/>
     <p><b>Toggle value is {!v.chkboxvalue} </b></p>
 </aura:component>
ToggleButtonController.js
 ({  
    getToggleButtonValue:function(component,event,helper){
        var checkCmp = component.find("tglbtn").get("v.checked");
        component.set("v.chkboxvalue",checkCmp);
    },
 })
Output:

See also:

Conclusion:
Hope you like this tutorial, for any query or suggestions please feel free to comment.
Thank you.