I have a lightning component inside VF page and I am using ui:inputCheckbox there many times.


<ui:inputCheckbox aura:id="isShown" label="Show"

However, I am not able to get it styled like slds as below:

enter image description here

Instead it is shown like the old one:

enter image description here

The styling applies to other elements but not only to checkbox. Also, there is no thing as lightning:checkbox. How to get it styled slds way? When added the component to lightning app builder, this style applies but not when added in a VF page.


Below is what did I did to get the slds style on checkboxes.

<label class="slds-checkbox">
    <ui:inputCheckbox value="{!v.isShown}" />
    <span class="slds-checkbox--faux" />
    <span class="slds-form-element__label">Show</span>

We can also use lightning:input of type checkbox where it automatically applies SLDS and hence is easier to use. It has disadvantage of event.getSource() function not working though, but only till Winter17 as from Spring 17 , it will be supported.


lightning:input is still in beta: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_input.htm, thus cannot use it.

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.