Convert Visualforce Checkboxes And Radio Buttons in Lightning Design System Using Javascript

Using the Lightning Design System, we can build custom applications with a look and feel that is consistent with Salesforce core features — without reverse engineering our styles.

We have lots of standard visualforce pages. Nowadays we all are facing some problems to convert standard visualforce pages in the Lightning design system. We need to customize all of the standard things.

We can easily implement SLDS for many standard components like checkbox, picklist etc. But in these days I am facing problem in convert list of checkboxes And list of  Radio Buttons to SLDS view.

So for this, I have written a script to convert the list of checkboxes and list of radio buttons to SLDS. Using this, we don’t lose our binding with controllers as well.

We just need to copy this below style and script tag to our visualforce page. Also give convertToLSD as the class name for all the needed select list in visualforce page. This script will pick those select list and convert them in SLDS.

See the demo code for visualforce and apex below.