2

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>
Improve this question
4
  • any code you have tried is appreciated as well ;)
    – glls
    Commented Dec 18, 2017 at 3:20
  • No worries, I have added the code I tried
    – user27749
    Commented Dec 18, 2017 at 3:38
  • 1
    Are you using SLDS on Lightning or SF Classic? or you just using SLDS on other platform?
    – Mahmood
    Commented Jan 9, 2018 at 6:37
  • @Mahmood I am using SLDS in a VF page
    – user27749
    Commented Jan 9, 2018 at 22:27

2 Answers 2

Reset to default
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>
Improve this answer
1
  • 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.
    – user27749
    Commented Jan 9, 2018 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

Improve this answer
1
  • 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
    – user27749
    Commented Jan 14, 2018 at 23:22

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .