1

I am trying to use checkbox group in a customer facing page using lightning design system styling.

The output should look something like this. I tried using multi select picklist but the rendering was bad.

Any help or pointers regarding the below is much appreciated

enter image description here

Part of the code I tried is as below

<fieldset class="slds-form--compound">
   <div class="slds-form-element__group">
      <div class="slds-form-element__row">
         <label class="slds-checkbox">
            <apex:inputCheckbox styleClass="slds-input"
               value="{!Request.Areas__c}"/>
            <span class="slds-checkbox--faux"></span>             
            <span class="slds-form-element__label">Paint</span> 
         </label>
      </div>
      <div class="slds-form-element__row">
         <label class="slds-checkbox">
            <apex:inputCheckbox styleClass="slds-input"
               value="{!Request.Areas__c}"/>
            <span class="slds-checkbox--faux"></span>             
            <span class="slds-form-element__label">Carpet</span>    
         </label>
      </div>
      <div class="slds-form-element__row">
         <label class="slds-checkbox">
            <apex:inputCheckbox styleClass="slds-input"
               value="{!Request.Areas__c}"/>
            <span class="slds-checkbox--faux"></span>             
            <span class="slds-form-element__label">Lightning</span>    
         </label>
      </div>
   </div>
</fieldset>
  • any code you have tried is appreciated as well ;) – glls Dec 18 '17 at 3:20
  • No worries, I have added the code I tried – Bob Gali Dec 18 '17 at 3:38
  • 1
    Are you using SLDS on Lightning or SF Classic? or you just using SLDS on other platform? – Mahmood Jan 9 '18 at 6:37
  • @Mahmood I am using SLDS in a VF page – Bob Gali Jan 9 '18 at 22:27
0

I tried below code and it seems to be working fine.

<fieldset class="slds-form-element">
        <legend class="slds-form-element__legend slds-form-element__label">Checkbox Group Label</legend>
        <div class="slds-form-element__control">
            <div>
                <span class="slds-checkbox">
                <input type="checkbox" name="options" id="checkbox-3" value="on" />
                <label class="slds-checkbox__label" for="checkbox-3">
                    <span class="slds-checkbox_faux"></span>
                    <span class="slds-form-element__label">Checkbox Label</span>
                </label>
            </span>
            </div>
            <div>
                <span class="slds-checkbox">
                <input type="checkbox" name="options" id="checkbox-4" value="on" />
                <label class="slds-checkbox__label" for="checkbox-4">
                    <span class="slds-checkbox_faux"></span>
                    <span class="slds-form-element__label">Checkbox Label</span>
                </label>
            </span>
            </div>

        </div>
    </fieldset>
  • Thanks but I want the picklist values to be displayed in SLDS design. The code that you wrote will create the view but I want the values to be saved to the field too. – Bob Gali Jan 9 '18 at 22:26
0

I am not sure if you are already using <apex:slds /> and wrapping your page code inside class="slds-scope" using <body> or <div> tag or not. But below markup is working perfectly fine without problem

VF Page

<apex:page controller="testSLDSCtrl">
    <apex:slds />

    <div class="slds-scope">
        <apex:form>
            <fieldset class="slds-form--compound">
                <div class="slds-form-element__group">
                    <div class="slds-form-element__row">
                        <label class="slds-checkbox">
                            <apex:inputCheckbox styleClass="slds-input"
                                                value="{! alpha }"/>
                            <span class="slds-checkbox--faux"></span>             
                            <span class="slds-form-element__label">Paint</span> 
                        </label>
                    </div>
                    <div class="slds-form-element__row">
                        <label class="slds-checkbox">
                            <apex:inputCheckbox styleClass="slds-input"
                                                value="{! beta }"/>
                            <span class="slds-checkbox--faux"></span>             
                            <span class="slds-form-element__label">Carpet</span>    
                        </label>
                    </div>
                    <div class="slds-form-element__row">
                        <label class="slds-checkbox">
                            <apex:inputCheckbox styleClass="slds-input"
                                                value="{! gamma }"/>
                            <span class="slds-checkbox--faux"></span>             
                            <span class="slds-form-element__label">Lightning</span>    
                        </label>
                    </div>
                </div>
                <apex:commandButton action="{! testProperties }" value="test values" reRender="txtOutput"/>
            </fieldset>   
        </apex:form>
        <apex:outputText id="txtOutput" value="{! output }" />
    </div>
</apex:page>

Test Controller (Used only to demonstrate value setting)

public with sharing class testSLDSCtrl 
{
    public boolean gamma {get;set;}
    public boolean alpha {get;set;}
    public boolean beta {get;set;}
    public String output {get;set;}

    public testSLDSCtrl(){}

    public void testProperties()
    {
        output = 'alpha:' + alpha + ' - beta:' + beta + '-gamma:' + gamma;
    }
}

Output

enter image description here

  • Thanks @Mahmood , the only difference is that I am trying to use a salesforce picklist value field in my code. Areas is a picklist field which already has the values Paint,Carpet, curtains and blinds etc configured in to it already. I want to display those values in my page and save the selected value to the database. You are using one value in your example, that would work but my scenario is bit different – Bob Gali Jan 14 '18 at 23:22

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.