Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save dancinllama/8126fc1c438205525d6f to your computer and use it in GitHub Desktop.
Save dancinllama/8126fc1c438205525d6f to your computer and use it in GitHub Desktop.
The checkboxes in the Salesforce Lightning Design System are odd ducks. They require a DOM structure that the Lightning component or aura ui:inputCheckbox tag doesn't support natively, due to the "slds-checkbox--faux" span, etc. Furthermore, the SLDS checkbox uses Ids to control the value between the faux span and the input:checkbox. I'm not sur…
<!-- LDS markup for a checkbox (https://www.lightningdesignsystem.com/components/forms/) -->
<div class="slds-form-element margintop10">
<label class="slds-checkbox" for="requiredCheckbox">
<ui:inputCheckbox aura:Id="requiredCheckbox" value="{!v.selectedFormObject.Required_On_Form__c}" />
<span class="slds-checkbox--faux" />
<span class="slds-form-element__label marginleft10">Required on Form?</span>
</label>
</div>
({
//Called from either another helper method or from the aura:initHandler call or an event, etc.
doInit : function(component, event, helper) {
return helper.fixLDSCheckboxes(component);
}
})
({
//Method for fixing Lightning Design System Checkboxes
fixLDSCheckboxes : function(component){
//Add all the checkboxes here. Note, you'll need their aura Ids
this.fixLDSCheckbox(component.find("requiredCheckbox"));
this.fixLDSCheckbox(component.find("showLabelCheckbox"));
this.fixLDSCheckbox(component.find("showCheckbox"));
return false;
},
fixLDSCheckbox : function(chkbox){
var el = chkbox.getElement();
var elLabel = el.parentElement;
elLabel.setAttribute("for",el.getAttribute("Id"));
return false;
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment