6

So, the SLDS says that a checkbox must be done like this:

<div class="slds-form-element">
  <label class="slds-checkbox" for="checkboxSample1">
    <input name="checkbox" type="checkbox" id="checkboxSample1" />
    <span class="slds-checkbox--faux"></span>
    <span class="slds-form-element__label">Checkbox Label</span>
  </label>
</div>

that is all well and good and it works.

BUT how the heck do you do it with an apex:inputField???

This produces the correct looking UI but you cannot check or uncheck the box

<div class="slds-form-element">
    <label class="slds-checkbox" for="provider_contacted">

        <apex:inPutField id="provider_contacted" value="{!loc.Provider_Contacted__c}"/>
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">Provider Contacted</span>

    </label>

</div>

and if you attempt to do this:

<div class="slds-form-element">
    <label class="slds-form-element__label" for="received">
        Received
    </label>

    <apex:inPutField id="received" value="{!loc.Received__c}"
                     styleClass="slds-checkbox slds-input slds-form-element__control"/>

</div>

It renders as follows (loosing SLDS styling)

enter image description here

So my question:

Q: How do you style an <apex:inputCheckbox> like a SLDS checkbox

Current Solution

Remove the for= from the label duh

Doing it this way, but is there a way that does not require JS for every element?

<div class="slds-form-element">
    <label class="slds-checkbox" for="provider_contacted">

        <apex:inPutField id="provider_contacted" value="{!loc.Provider_Contacted__c}"/>
        <span class="slds-checkbox--faux" onclick="toggleCheckbox($('[id$=provider_contacted]'));"></span>
        <span class="slds-form-element__label">Provider Contacted</span>
    </label>

</div>

    <script>
        function toggleCheckbox(e){
            $(e).prop("checked", !(e).prop("checked"));
        }
    </script>

  • Yes SLDS is CSS framework. for manipulating the element and binding value, we require js. Salesforce should need to take a step and make SLDS compatible with VF standard component. So we can use VF standard component with SLDS styles – Ratan Paul Dec 5 '15 at 5:28
  • 1
    @Ratan - NO JS is required to check / uncheck the checkbox if using a plain html input instead of an <apex:inputfield> - so curious as to why an input element created using an apex:inputChecbox breaks it vs a regular html input element – Eric Dec 5 '15 at 5:29
  • Yes correct @Eric – Ratan Paul Dec 5 '15 at 5:30
15

Eric Edit

The answer provided by Ashwani is the correct way to do it. However, the actual reason for my issue in the question was that I had left the for= in the label. If you take this answer and add a for=xxx to the label you will notice what I saw in my original question.

This answer gave the proof of concept that it worked as I thought it should. I would have never taken another look at it otherwise so thank you....

End Edit

I did it this way and worked perfectly. You need to give styleclass="slds-input" attribute for inputField/inputCheckbox(Eric note: This is best practice but striking just to highlight that it was not the reason for what I saw).

     <div class="slds-form-element__row">
       <div class="slds-form-element">
          <label class="slds-checkbox">
                <apex:inputcheckbox id="isinstance" styleclass="slds-input" value="{!isSameInstance}" />
                   <span class="slds-checkbox--faux"></span>
                   <span class="slds-form-element__label">Are you Tier 3?</span>
          </label>
       </div>
    </div>
  • Ok, so your answer got me looking at other things. Thanks for the kick in the pants... What the issue ended up being was I left the dang for= in the label. no slds-input was needed on the input field. If you do not mind me adding the actual cause of the issue to your answer I will mark it as accepted. – Eric Dec 7 '15 at 12:29
  • Please go ahead. @Eric – Ashwani Dec 7 '15 at 12:30
  • Thanks, please feel free to edit my edits. Tried to get point across that your answer was best practice yet highlight the actual reason for what I saw...Thank you again for taking the time to provide the answer. Remove a bunch of onclick JS that was not needed lol – Eric Dec 7 '15 at 12:40
  • @Eric. Answer looks perfect. Auto-correct feature always mesh my name :) – Ashwani Dec 7 '15 at 12:44
  • 1
    I usually just avoided the slds-checkbox, but I had a development where it was a requirement and this answer is spot on. Thanks! – Jon Duelfer Aug 30 '17 at 14:23

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.