Toggle Checkbox

How To Use Toggle Checkbox in Lightning Component ?

Lightning Component

Sharing is caring!

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.

Toggle Checkbox
Toggle Checkbox

Lightning Component [sample.cmp]

  • 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]

  • 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

Output -:

Toggle Checkbox
Toggle Checkbox

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. ?

 

Sharing is caring!

(Visited 6,182 times, 1 visits today)

5 comments

Leave a Reply