Bumped by Community user

occurred Dec 6 at 19:05

Bumped by Community user

occurred Aug 6 at 11:07

Bumped by Community user

occurred Apr 7 at 15:05

Bumped by Community user

occurred Dec 2, 2023 at 19:08

Bumped by Community user

occurred Jul 29, 2023 at 19:05

Bumped by Community user

occurred Mar 28, 2023 at 1:04

Bumped by Community user

occurred Nov 26, 2022 at 17:07

Bumped by Community user

occurred Jul 25, 2022 at 17:05

Bumped by Community user

occurred Mar 16, 2022 at 11:04

Bumped by Community user

occurred Nov 16, 2021 at 8:06

Bumped by Community user

occurred Jul 19, 2021 at 5:00

Bumped by Community user

occurred Mar 18, 2021 at 21:00

Bumped by Community user

occurred Nov 18, 2020 at 12:03

Bumped by Community user

occurred Jul 19, 2020 at 19:02

Bumped by Community user

occurred Mar 18, 2020 at 1:01

Bumped by Community user

occurred Nov 12, 2019 at 22:01

Bumped by Community user

occurred Jul 11, 2019 at 19:03

Bumped by Community user

occurred Mar 6, 2019 at 20:00

Notice removed Authoritative reference needed by CommunityBot

occurred Jan 17, 2018 at 7:46

Bounty Ended with no winning answer by CommunityBot

occurred Jan 17, 2018 at 7:46

code formatting

Source Link

edited Jan 9, 2018 at 6:35

Mahmood

6k
5
39
62

                        <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>

                        <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>

<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>

Notice added Authoritative reference needed by user27749

occurred Jan 9, 2018 at 5:47

Bounty Started worth 50 reputation by user27749

occurred Jan 9, 2018 at 5:47

added 2426 characters in body

Source Link

edited Dec 18, 2017 at 3:38

user27749

494
1
13
26

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>

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>

Source Link

asked Dec 18, 2017 at 2:31

user27749

494
1
13
26

Checkbox group in lightning design system

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

lightning slds

Stack Exchange Network

Return to Question

Checkbox group in lightning design system