<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>component &#8211; Hamza Siddiqui</title>
	<atom:link href="https://www.mhamzas.com/blog/tag/component/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.mhamzas.com</link>
	<description>4x Salesforce MVP &#124; 26x Certified &#124; Salesforce App &#38; System Architect</description>
	<lastBuildDate>Fri, 05 Jun 2020 12:47:40 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
<site xmlns="com-wordpress:feed-additions:1">233526040</site>	<item>
		<title>Checkbox label with URL in AURA/LWC</title>
		<link>https://www.mhamzas.com/blog/2020/06/05/checkbox-label-with-url-in-aura-lwc/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=checkbox-label-with-url-in-aura-lwc</link>
					<comments>https://www.mhamzas.com/blog/2020/06/05/checkbox-label-with-url-in-aura-lwc/#comments</comments>
		
		<dc:creator><![CDATA[hamza]]></dc:creator>
		<pubDate>Fri, 05 Jun 2020 12:47:39 +0000</pubDate>
				<category><![CDATA[Salesforce]]></category>
		<category><![CDATA[aura]]></category>
		<category><![CDATA[component]]></category>
		<category><![CDATA[lightning]]></category>
		<category><![CDATA[lwc]]></category>
		<category><![CDATA[salesforce]]></category>
		<guid isPermaLink="false">https://www.mhamzas.com/?p=3134</guid>

					<description><![CDATA[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&#8217;re not allowed to add <br /><a href="https://www.mhamzas.com/blog/2020/06/05/checkbox-label-with-url-in-aura-lwc/" class="more-link btn btn-primary">Read More</a>]]></description>
										<content:encoded><![CDATA[
<p>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. </p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img data-recalc-dims="1" decoding="async" width="369" height="43" src="https://i0.wp.com/www.mhamzas.com/wp-content/uploads/2020/06/image.png?resize=369%2C43&#038;ssl=1" alt="" class="wp-image-3135" srcset="https://i0.wp.com/www.mhamzas.com/wp-content/uploads/2020/06/image.png?w=369&amp;ssl=1 369w, https://i0.wp.com/www.mhamzas.com/wp-content/uploads/2020/06/image.png?resize=300%2C35&amp;ssl=1 300w" sizes="(max-width: 369px) 100vw, 369px" /></figure></div>



<p>But using lightning:input or lightning-input, we&#8217;re not allowed to add HTML tags under LABEL attribute.</p>



<p>So here are the work-arounds for AURA and LWC,</p>



<h2 class="wp-block-heading">AURA</h2>



<p>Component:</p>



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



<p>JS</p>



<pre class="wp-block-code"><code>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") ); 
}</code></pre>



<h2 class="wp-block-heading">LWC</h2>



<p>HTML</p>



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



<p>JS</p>



<pre class="wp-block-code"><code>handleCheckBoxChange(event){        
    console.log('Authorized::'+event.target.checked);
    // Your Logic
}</code></pre>



<p>Source <br><a href="https://salesforce.stackexchange.com/questions/213749/lightninginput-checkbox-label-with-url">https://salesforce.stackexchange.com/questions/213749/lightninginput-checkbox-label-with-url</a></p>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.mhamzas.com/blog/2020/06/05/checkbox-label-with-url-in-aura-lwc/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">3134</post-id>	</item>
	</channel>
</rss>
