html code

Checkbox label containing a URL in Aura/LWC

/ apex, Salesforce / By

This is a frequently encountered scenario in which you want to display a straightforward checkbox for accepting terms and conditions, accompanied by a URL link to your terms of service or privacy policy

However, when using lightning:input or lightning-input, it’s not permissible to include HTML tags within the LABEL attribute.

Here are the solutions 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
}

Related Posts