To render HTML conditionally in LWC we have if:true|false directive like we used <aura:if> in aura components.

For conditional rendering we just need to add the if:true|false directive to a nested <template> tag that encloses the conditional content.

The if:true|false={property} directive binds data to the template and removes and inserts DOM elements based on whether the data returns a true or a false value.

Below is an example for conditional rendering in LWC in which we are rendering an image based on a toggle button.



    <lightning-card title="Conditional Rendering in LWC" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <div class="slds-form-element">
                <label class="slds-checkbox_toggle slds-grid">
                  <span class="slds-form-element__label slds-m-bottom_none">Show Image</span>
                  <input type="checkbox" name="checkbox-toggle-16" value="checkbox-toggle-16" aria-describedby="checkbox-toggle-16" onchange={handleChange}/>
                  <span id="checkbox-toggle-16" class="slds-checkbox_faux_container" aria-live="assertive">
                    <span class="slds-checkbox_faux"></span>
                    <span class="slds-checkbox_on">Enabled</span>
                    <span class="slds-checkbox_off">Disabled</span>
            <template if:true={isVisible}>
                <div class="slds-m-vertical_medium">
                    <div><img src={pictureUrl}/></div>




import { LightningElement } from 'lwc';

export default class ConditionalRendering extends LightningElement {
    isVisible = false;
    pictureUrl = '';
    handleChange(event) {
        this.isVisible =;

Leave A Reply

Please verify that you are not a robot.

Tell us about Your Company

How can we help you with your business?

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home