How To Use Toggle Checkbox in Lightning Component ?

In this post we are seeing, that how to create and Use Toggle Switch / Toggle checkbox in salesforce lightning component By using salesforce lightning design system framework CSS .

Prerequisites : Basic understanding of Lightning Components.

Lightning Component [sample.cmp]

<aura:component>
<div class="slds-m-around--large">
  <!--PART 1 for create toggle switch/checkbox form element-->    
  <div class="slds-form-element">
    <label class="slds-checkbox_toggle slds-grid">
      <span class="slds-form-element__label slds-m-bottom_none">Toggle Info</span>
       <ui:inputCheckbox change="{!c.selectChange}"/>
      <span id="toggle-desc" class="slds-checkbox_faux_container" aria-live="assertive">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-checkbox_on">Show</span>
        <span class="slds-checkbox_off">Hide</span>
      </span>
    </label>
  </div>
<!--PART 2 : create a Div with slds-hide class, control by toggle checkbox-->        
   <div aura:id="DivID" class="slds-hide">
     <ul>
        <li>account 1</li>
        <li>account 2</li>
        <li>account 3</li>
        <li>account 4</li>
        <li>account 5</li>    
     </ul>  
   </div>
    
 </div>
</aura:component>

• We are create a toggle ui:inputCheckbox  element by using lightning CSS style class. [PART 1]
• We have a change event on this ui:inputCheckbox. which is call selectChange js controller function .
• In the PART 2 we are create a HTML div with the slds-hide class so by default our Div part is hidden.

Controller [sampleController.js]

({
	selectChange : function(component, event, helper) {
        // first get the div element. by using aura:id
      var changeElement = component.find("DivID");
        // by using $A.util.toggleClass add-remove slds-hide class
      $A.util.toggleClass(changeElement, "slds-hide");
	  },
})

• In the above JS controller we have a selectChange function.
• In this function first we are get the div element by Using the aura:id
• Then we are add-remove slds-hide class from div element by using of $A.utli.toggleClass.

TestApp.app

<aura:application extends="force:slds">
  <c:sample/>
  <!-- here c: is org. namespace prefix-->
</aura:application>

Output -:

Related Resources :

Checkbox Toggle

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box. ?