Toggle Checkbox Example in lightning component - Salesforce Globe For You

Use the following code for checkbox toggle display  - Salesforce Globe For You 

 <label class="slds-checkbox_toggle slds-grid">
  <span class="slds-form-element__label slds-m-bottom_none">Email Opt Out?</span>
   <ui:inputCheckbox  value="{!v.newLead.HasOptedOutOfEmail}"/>
  <span id="toggle-desc" class="slds-checkbox_faux_container" aria-live="assertive">
    <span class="slds-checkbox_faux"></span>
    <span class="slds-checkbox_on">Yes</span>
    <span class="slds-checkbox_off">No</span>
  </span>
</label>

Apex Class:ToggleCheckboxController

public class ToggleCheckboxController {
 
    @AuraEnabled
    public static void createLead(Lead newLead) {
        Lead objLead = new Lead();
        objLead.LastName = newLead.LastName;
        objLead.company = newLead.Company;
        objLead.HasOptedOutOfEmail = newLead.HasOptedOutOfEmail;
        system.debug('New Lead'+objLead);
        insert objLead;
     
    }
 
 
}
Lightning Component: ToggleCheckbox

<aura:component controller="ToggleCheckboxController" implements="forceCommunity:availableForAllPageTypes,force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId">
        <aura:attribute name="newLead" type="Lead"
         default="{ 'sobjectType': 'Lead',
                  'LastName':'',
                        'Company': '',
                        'HasOptedOutOfEmail': false }"/>

    <div aria-labelledby="newleadform">
        <fieldset class="slds-box slds-theme--default slds-container--small">
        <legend id="newLeadForm" class="slds-text-heading--small
          slds-p-vertical--medium">
          New Lead Form
        </legend>
  <form class="slds-form--stacked">       
            <lightning:input aura:id="leadform" label="Lead Name"
                             name="leadName"
                             value="{!v.newLead.LastName}"
                             required="true"/>
         
            <lightning:input type="text" aura:id="leadform" label="Company"
                             name="company"
                             value="{!v.newLead.Company}"/>
            <label class="slds-checkbox_toggle slds-grid">
              <span class="slds-form-element__label slds-m-bottom_none">Email Opt Out?</span>
               <ui:inputCheckbox  value="{!v.newLead.HasOptedOutOfEmail}"/>
              <span id="toggle-desc" class="slds-checkbox_faux_container" aria-live="assertive">
                <span class="slds-checkbox_faux"></span>
                <span class="slds-checkbox_on">Yes</span>
                <span class="slds-checkbox_off">No</span>
              </span>
            </label>
            <lightning:button label="Create Lead"
                              class="slds-m-top--medium"
                              variant="brand"
                              onclick="{!c.createRecord}"/>
        </form>
</fieldset>
       </div>
</aura:component>

component controller: ToggleCheckboxController

({
createRecord : function(component, event, helper) {
       var action = component.get("c.createLead");
        var lead = component.get("v.newLead");
     
     action.setParams({
        newLead: lead
    });
     action.setCallback(this, function(a) {
           var state = a.getState();
            if (state === "SUCCESS") {
                alert("Lead Successfully Created");
            }
         else if (state = "false")
         {
              alert("Failed");
         }
        });
    $A.enqueueAction(action);

    }
})

Lightning App:ToggleCheckboxApp

<aura:application extends="force:slds">
    <c:ToggleCheckbox/>
</aura:application>

Output: Run the ToggleCheckbox app to view the output.