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