Conditional rendering
Conditional rendering allows you to show or hide content based on a condition.
Legacy Components
You are reading the legacy components documentation. Please refer to the new documentation for the latest components.
Components support conditional rendering.
<component>
<div if="false">This only shows if true</div>
<div elseif="true">This is an elseif</div>
<div else>This won't show because it isn't true</div>
</component>
Use this component in an email:
<html>
<body>
A simple email
<my-first-component>
</body>
</html>
The output is:
<html>
<body>
A simple email
<div>This is an elseif</div>
</body>
</html>
If you don't want extra <div> tags for each conditional, use <fragment> instead.
<component>
<fragment if="false"> This only shows if true </fragment>
<fragment elseif="true"> This is an elseif </fragment>
<fragment else> This won't show because it isn't true </fragment>
</component>
Use this component in an email:
<html>
<body>
A simple email
<my-first-component>
</body>
</html>
The output is:
<html>
<body>
A simple email This is an elseif
</body>
</html>
<fieldset>
<fieldset name="products" , type="list">
<input type="text" name="name" />
<input type="text" name="price" />
</fieldset>
</fieldset>
<component>
<ul>
<fragment foreach="product in products">
<li if="product.price<2">${product.name} - $${product.price}</li>
</fragment>
</ul>
</component>
<html>
<head></head>
<body>
<h1>Products less than $2</h1>
<my-first-component
products="[{name:'apple', price:'0.50'},{name:'banana', price:'0.75'},{name:'tomato',price:'3.00'},{name:'pie',price:'8.00'}]"
>
</my-first-component>
</body>
</html>
The output source becomes:
<html>
<head></head>
<body>
<h1>Products less than $2</h1>
<ul>
<li>apple - $0.50</li>
<li>banana - $0.75</li>
</ul>
</body>
</html>
Let's explore a new component called conditional-component:
<fieldset>
<input type="radio" name="variant" value="primary" checked />
<input type="radio" name="variant" value="secondary" />
<input type="radio" name="variant" value="outline" />
</fieldset>
<component>
Variant: ${variant}
<div if="variant==='primary'">Pay attention to me</div>
<div elseif="variant==='secondary'">Maybe attention to me</div>
<div else>Probably don't pay attention to me</div>
</component>
<html>
<head></head>
<body>
<h1>Conditional Components</h1>
<conditional-component variant="secondary"></conditional-component>
</body>
</html>
The radio type input restricts the valid inputs to one of the set of values.
The output source becomes:
<html>
<head></head>
<body>
<h1>Conditional Components</h1>
Variant: secondary
<div>Maybe attention to me</div>
</body>
</html>
You can use ternary expressions within conditionals.
<component>
${conditionToEvaluate ? whatToDoIfTrue : whatToDoIfFalse}
</component>
<fieldset>
<input type="radio" name="variant" value="primary" checked />
<input type="radio" name="variant" value="secondary" />
<input type="radio" name="variant" value="outline" />
</fieldset>
<component>
${variant === 'primary' ? 'If the variant is primary, this message is
displayed.' : 'If not, this is displayed.'}
</component>
The output source for this component with the same base email is:
<html>
<head></head>
<body>
<h1>Conditional Components</h1>
If not, this is displayed.
</body>
</html>
You can nest ternary expressions for more complex conditionals.
<fieldset>
<input type="number" name="luckyguess" />
</fieldset>
<component>
${luckyguess === 25 ? 'Correct!' : luckyguess > 50 ? 'That guess is too high!'
: luckyguess < 15 ? 'That guess is too low!' : 'Pretty close!'}
</component>
Use this component in a simple base email:
<html>
<head></head>
<body>
<h1>Let's play a guessing game</h1>
<conditional-component luckyguess="26"></conditional-component>
</body>
</html>
The output source becomes:
<html>
<head></head>
<body>
<h1>Let's play a guessing game</h1>
Pretty close!
</body>
</html>