Toggle Checkbox

How To Use Toggle Checkbox in Lightning Component ?

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.

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

 

(Visited 11,416 times, 1 visits today)

7 comments

  • Hi,

    How can we move the text inside the toggle, meaning i want to show the ‘show’ and ‘hide’ inside the toggle instead of a tick.

  • Does anyone know how/where to give feedback to Salesforce about this toggle?

    The color of the toggle in the off position should not be grey. In UI design, greyed out means the toggle itself is disabled and can’t be selected. The toggle in the off position should be the regular black text color.

    Does this drive anyone else crazy? It’s flat out bad UI design. Has anyone seen this being talked about elsewhere? I’d like to give me feedback as well as track if they intend to correct their faux pas.

    Thanks,

    Dave

  • The fill color of the https://www.lightningdesignsystem.com/components/checkbox-toggle/ toggle in the off position should not be grey. In UI design, greyed out means the toggle itself is disabled and can’t be selected. The toggle in the off position is selectable and should be a color that doesn’t look disabled. The iPhone toggle, for example, uses a white fill color, not grey.

    Is it possible, and if so how, to change the fill color of the off position? It’s flat out bad UI design. Has anyone seen this being talked about elsewhere? I’d like to give me feedback as well as track if they intend to correct their faux pas. Does anyone know how/where to give feedback to Salesforce about this toggle? Thx!

Leave a Reply