764 Views

This is a pretty common use case where you want to show a simple checkbox to authorize the terms and condition with a URL to your terms of service or privacy url.

But using lightning:input or lightning-input, we’re not allowed to add HTML tags under LABEL attribute.

So here are the work-arounds for AURA and LWC,

AURA

Component:

<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

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") ); 
}

LWC

HTML

<div class="slds-p-around_medium lgc-bg">
    <input type="checkbox" id="terms" name="authorize" onchange={handleCheckBoxChange} required="required"></input>
    <label for="terms" style="display: inline;" class="slds-form-element__label"> Yes, by creating an account I agree to the <a href="#">Terms and Service.</label>
</div>

JS

handleCheckBoxChange(event){        
    console.log('Authorized::'+event.target.checked);
    // Your Logic
}

Source
https://salesforce.stackexchange.com/questions/213749/lightninginput-checkbox-label-with-url

Leave a Comment