I was hoping that there was an easier way to do this. I have loaded some custom CSS from our client into our customer community using an Aura theme layout component. Most things either looked fine or were simple fixes, but the lightning-input type="toggle" is showing up too small.

After poking around in inspect element, I was able to target "span.slds-checkbox_faux" to change the size of the bigger circle. The problem comes with the ::before and ::after pseudo-elements of this target. When the toggle is off/inactive, ::after represents the smaller circle within the bigger circle. Once you click it and it turns on/is active, it changes: ::after becomes the checkmark inside the bigger circle, and ::before becomes the smaller circle. Therefore I can't use static CSS to change the size of the toggle. As far as I can tell, I also can't use JavaScript to target the pseudo-elements, so I can't dynamically change the styling that way either.

Is there anything I can do to properly change the size of the toggles? If not, I think I will be forced to use regular checkboxes. Thanks in advance!


I couldn't find any parameter to customise the size for the toggle. https://developer.salesforce.com/docs/component-library/bundle/lightning-input/specification According to my findings the best way when customizing things in lwc is writing your own html, there are quite some difficulties manipulating standard things with the shadowdom in play,and if thats not possible add a standalone third party library to static resource although just for small requirements thats quite drastic or the last one as you said checkboxes as an alternative

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.