3

I want to use radio buttons in Lightning Design. In my Visualforce page, I am retrieving the options from my controller and doing something like this:

<apex:repeat value="{!SiteDetails}" var="rad"> 
<apex:selectRadio value="{!rad.site__c}" rendered="{!rad.Site_Type__c == 'Radio'}">
    <apex:selectOptions value="{!SiteOptions[rad]}" />  
</apex:selectRadio>

Is there a way to do the same thing in Lightning Design?

Edit: I mean a Visualforce page built using the Lightning Design System.

  • do you mean for a vf page built using the lightning design system or a proper lightning component? – Caspar Harmer Jan 12 '16 at 19:39
  • Were you able to get this working? – Prady Jul 21 '17 at 7:18
0

You can use the lightningStylesheets attribute for <apex:page> to automatically style most Visualforce components on your page (including <apex:selectRadio>) to match the Lightning Experience UI:

Example:

<apex:page lightningStylesheets="true">

Alternatively, if you want to use the Lightning Design System (SLDS) to style your radio buttons in a Radio Group (in a similar format to how you have them set up in your example), you can use the following concept:

Example:

<!-- Include the Lightning Design System -->

<apex:slds />

<!-- Begin SLDS-styled content -->

<div class="slds-scope">

    <!-- Create a Radio Group -->

    <fieldset class="slds-form-element">
        <div class="slds-form-element__control">
            <apex:variable var="i" value="{!0}" />
            <apex:repeat value="{!SiteDetails}" var="rad">
                <apex:outputPanel rendered="{!rad.Site_Type__c == 'Radio'}">
                    <span class="slds-radio">
                        <input id="radio-{!i}" name="options" type="radio" value="{!rad.site__c}" />
                        <label class="slds-radio__label" for="radio-{!i}">
                            <span class="slds-radio_faux"></span>
                            <span class="slds-form-element__label">{!SiteOptions[rad]}</span>
                        </label>
                    </span>
                    <apex:variable var="i" value="{!i + 1}" />
                </apex:outputPanel>
            </apex:repeat>
        </div>
    </fieldset>

</div>

Result:

enter image description here

|improve this answer|||||

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.