5

I have been tying to include "url/hyperlink" within a checkbox "label" using lightning input, but to no avail. Given is what I have tried and with the results, I want "Terms and Service" part of the checkbox to appear as hyperlink with a URL.

Lightning CMP

<aura:attribute name="termsText" type="String" default=""/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<div class="slds-size_1-of-1 slds-medium-size_1-of-2 slds-m-bottom_small slds-p-horizontal_x-small ">
    <lightning:input type="checkbox" label="{! v.termsText }" name="terms" value="{!v.chkTerms}" />
</div>

JS Controller

doInit : function(component, event, helper) {
    var terms = "Yes, by creating an account I agree to the \<a href='#'\>Terms and Service.\</a\>";
    component.set("v.termsText", terms);
}

Output

enter image description here

Desired Ouput

enter image description here

  • you can use aura:unescapedHtml or lightning:formattedRichText for displaying the hyperlink – Raul Apr 4 '18 at 11:54
  • Yeah, but the problem that I see with those components is the text is not associated to the checkbox plus alignment gets quirky, and I am not really good with CSS. :-( – Mahmood Apr 4 '18 at 11:57
4

I achieved the results by using HTML-Checkbox and traditional anchor tag combination.

Lightning CMP

<aura:attribute name="chkTerms" type="Boolean"/>
<div>
    <input type="checkbox" id="terms" name="terms" value="{!v.chkTerms}" onchange="{!c.termsChanged}" ></input>
    <label for="terms"> Yes, by creating an account I agree to the <a href="#">Terms and Service.</a></label>
</div>

JS-Controller

And was able capture event and its value using JavaScript.

termsChanged : function(cmp, event, helper){
    cmp.set("v.chkTerms", document.getElementById("terms").checked );
    //console.log(event.getSource().get("v.checked"));
    // the above didn't work except for `ui:input` or `lightning:input`
    console.log(cmp.get("v.chkTerms") ); 
}
  • Checkbox in SLDS documentation has all the required class to display right structure. – Raul Apr 4 '18 at 14:55
  • 1
    @Rahul Thanks for posting that, but if you look closely, SLDS checkbox is exactly using the same approach, input checkbox and label as I indicated in my answer. Only thing in that SLDS link is that, it will follow the SLDS styling without adding any custom CSS. – Mahmood Apr 4 '18 at 16:13

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.