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}" />

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


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, 2018 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, 2018 at 11:57

1 Answer 1


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

Lightning CMP

<aura:attribute name="chkTerms" type="Boolean"/>
    <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>


And was able capture event and its value using JavaScript.

termsChanged : function(cmp, event, helper){
    cmp.set("v.chkTerms", document.getElementById("terms").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, 2018 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, 2018 at 16:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .