Toggle Button(Checkbox) in Lightning Component

Toggle button in the lightning component

Step 1: Log in 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: