Conditional Rendering in LWC

Learn how to use lwc:if, lwc:elseif, and lwc:else directives in Lightning Web Components — and know exactly when and how to apply each approach.

1. Introduction

Conditional rendering in Lightning Web Components (LWC) lets you show or hide parts of the HTML template based on the value of a JavaScript property.

LWC provides three directives for this:

• lwc:if — Renders the block when the condition is truthy.
• lwc:elseif — An optional additional condition checked when lwc:if is false.
• lwc:else — Renders when all preceding conditions are false (the fallback block).

⚠️ Important: The older if:true and if:false directives are deprecated since API v55. Always use lwc:if in new components.

All three directives are applied directly on the <template> tag — they do not add any extra DOM element to the page.

2. lwc:if — Basic Example

The simplest use case: show a message only when a property is true. Clicking the button toggles the visibility of the message.

HTML (conditionalDemo.html):

<template>
    <lightning-card title="lwc:if Example" icon-name="utility:preview">
        <div class="slds-p-around_medium">

            <lightning-button
                label="Toggle Message"
                onclick={toggleMessage}>
            </lightning-button>

            <template lwc:if={showMessage}>
                <p style="color:green; margin-top:12px;">
                    ✅ The message is now visible!
                </p>
            </template>

        </div>
    </lightning-card>
</template>

JavaScript (conditionalDemo.js):

import { LightningElement } from 'lwc';

export default class ConditionalDemo extends LightningElement {
    showMessage = false;

    toggleMessage() {
        this.showMessage = !this.showMessage;
    }
}

• showMessage starts as false — the message block is not rendered.
• Clicking the button calls toggleMessage() which flips the boolean.
• When showMessage becomes true, the <template lwc:if> block is rendered in the DOM.

3. lwc:if + lwc:else

Use lwc:else to show an alternate block when the condition is false. This is the classic "show one or the other" pattern.

HTML (ifElseDemo.html):

<template>
    <lightning-card title="Login Status" icon-name="utility:user">
        <div class="slds-p-around_medium">

            <template lwc:if={isLoggedIn}>
                <p>👋 Welcome back! You are logged in.</p>
            </template>
            <template lwc:else>
                <p>🔒 Please log in to continue.</p>
            </template>

            <lightning-button
                label="Toggle Login"
                onclick={toggleLogin}
                class="slds-m-top_small">
            </lightning-button>

        </div>
    </lightning-card>
</template>

JavaScript (ifElseDemo.js):

import { LightningElement } from 'lwc';

export default class IfElseDemo extends LightningElement {
    isLoggedIn = false;

    toggleLogin() {
        this.isLoggedIn = !this.isLoggedIn;
    }
}

• When isLoggedIn is false, the lwc:else block renders — "Please log in".
• When isLoggedIn is true, the lwc:if block renders — "Welcome back!".
• ⚠️ lwc:else must immediately follow the lwc:if block — no HTML elements between them.

4. lwc:if + lwc:elseif + lwc:else

Use lwc:elseif when you have three or more possible states. This example renders a traffic light with three conditions.

HTML (trafficLight.html):

<template>
    <lightning-card title="Traffic Light" icon-name="utility:traffic">
        <div class="slds-p-around_medium">

            <template lwc:if={isRed}>
                <p style="color:red; font-size:20px; font-weight:bold;">
                    🔴 STOP
                </p>
            </template>
            <template lwc:elseif={isYellow}>
                <p style="color:orange; font-size:20px; font-weight:bold;">
                    🟡 SLOW DOWN
                </p>
            </template>
            <template lwc:else>
                <p style="color:green; font-size:20px; font-weight:bold;">
                    🟢 GO
                </p>
            </template>

            <div class="slds-m-top_medium">
                <lightning-button label="Red"    onclick={setRed}    class="slds-m-right_small"></lightning-button>
                <lightning-button label="Yellow" onclick={setYellow} class="slds-m-right_small"></lightning-button>
                <lightning-button label="Green"  onclick={setGreen}></lightning-button>
            </div>

        </div>
    </lightning-card>
</template>

JavaScript (trafficLight.js):

import { LightningElement } from 'lwc';

export default class TrafficLight extends LightningElement {
    color = 'green'; // default state

    // Getters for template conditions
    get isRed()    { return this.color === 'red';    }
    get isYellow() { return this.color === 'yellow'; }

    // Button handlers
    setRed()    { this.color = 'red';    }
    setYellow() { this.color = 'yellow'; }
    setGreen()  { this.color = 'green';  }
}

• Getter functions are used for isRed and isYellow — this is the recommended pattern for computed conditions.
• lwc:else acts as the final fallback (Green) when neither isRed nor isYellow is true.
• You can chain as many lwc:elseif blocks as needed between lwc:if and lwc:else.

5. Practical Example — Role-Based UI

A real-world scenario: show different content based on the user's role — Admin, Manager, or a standard User.

HTML (roleBasedUI.html):

<template>
    <lightning-card title="Role Based View" icon-name="utility:shield">
        <div class="slds-p-around_medium">

            <template lwc:if={isAdmin}>
                <div class="slds-box slds-theme_shade">
                    <p>🛡️ <b>Admin Panel</b> — Full access to all settings.</p>
                </div>
            </template>
            <template lwc:elseif={isManager}>
                <div class="slds-box slds-theme_shade">
                    <p>📊 <b>Manager Dashboard</b> — View reports and team data.</p>
                </div>
            </template>
            <template lwc:else>
                <div class="slds-box slds-theme_shade">
                    <p>👤 <b>User View</b> — View your own records only.</p>
                </div>
            </template>

            <div class="slds-m-top_medium">
                <lightning-button label="Set Admin"   onclick={setAdmin}   class="slds-m-right_small"></lightning-button>
                <lightning-button label="Set Manager" onclick={setManager} class="slds-m-right_small"></lightning-button>
                <lightning-button label="Set User"    onclick={setUser}></lightning-button>
            </div>

        </div>
    </lightning-card>
</template>

JavaScript (roleBasedUI.js):

import { LightningElement } from 'lwc';

export default class RoleBasedUI extends LightningElement {
    role = 'user'; // default role

    get isAdmin()   { return this.role === 'admin';   }
    get isManager() { return this.role === 'manager'; }

    setAdmin()   { this.role = 'admin';   }
    setManager() { this.role = 'manager'; }
    setUser()    { this.role = 'user';    }
}

• Clicking Set Admin sets role = 'admin' → isAdmin getter returns true → Admin Panel renders.
• Clicking Set Manager sets role = 'manager' → Manager Dashboard renders.
• Clicking Set User sets role = 'user' → neither getter is true → User View (lwc:else) renders.

6. Key Rules & Best Practices

Rule	Detail
Only on <template> tags	lwc:if / lwc:elseif / lwc:else must be placed on <template> tags, not on regular HTML elements like <div>.
Immediate siblings only	lwc:else and lwc:elseif must immediately follow the closing tag of the previous block — no HTML elements between them.
Use getter functions	For complex or computed conditions, use JavaScript getter functions instead of inline expressions. Keeps templates clean and readable.
Deprecated: if:true / if:false	Do not use if:true={prop} or if:false={prop} — they are deprecated since API v55 and will be removed in a future release.
DOM removal, not just hiding	lwc:if completely removes the element from the DOM when false — it does not use CSS display:none. This means child lifecycle hooks (connectedCallback, disconnectedCallback) fire.
No multiple directives on one tag	You cannot put two conditional directives on the same <template> tag. Use nested templates instead.

7. if:true vs lwc:if — Comparison

Aspect	if:true / if:false (Old)	lwc:if / lwc:elseif / lwc:else (New)
Status	⚠️ Deprecated since API v55	✅ Current standard
Else support	❌ No native else — requires two separate blocks	✅ Native lwc:else and lwc:elseif
elseif support	❌ Not available	✅ Chainable lwc:elseif blocks
Syntax	if:true={prop}	lwc:if={prop}
Recommended for new code	❌ No	✅ Yes — always use lwc:if

8. Quick Reference

Basic if:

<template lwc:if={condition}>
    <!-- rendered when condition is truthy -->
</template>

if / else:

<template lwc:if={condition}>
    <!-- rendered when true -->
</template>
<template lwc:else>
    <!-- rendered when false -->
</template>

if / elseif / else:

<template lwc:if={conditionA}>
    <!-- rendered when conditionA is true -->
</template>
<template lwc:elseif={conditionB}>
    <!-- rendered when conditionA false and conditionB true -->
</template>
<template lwc:else>
    <!-- rendered when both conditions are false -->
</template>

📝 Remember: Use getter functions for computed conditions to keep your templates clean. Always use lwc:if in new development — if:true / if:false are deprecated. The conditional block is removed from the DOM (not hidden) when false, which triggers lifecycle hooks on child components.

📚 Related Posts

Life Cycle Hooks in LWC

Read more →

Data Binding in LWC

Read more →

LWC Decorators @api, @track, @wire

Read more →

Document Object Model (DOM) in LWC

Read more →

Handling Errors in LWC

Read more →

Debugging LWC with Chrome DevTools

Read more →