x-if - Conditional Rendering in Alpine.js

From the Alpine.js cheat sheet · Directives - Control Flow · verified Jul 2026

Conditionally add/remove elements from DOM

html

<div x-data="{ show: false }">
  <template x-if="show">
    <div>This is conditionally rendered</div>
  </template>
</div>

✅ Must be used on <template> tag

💡 Completely removes element from DOM when false

🔍 Use for expensive components that rarely show

⚡ x-show is better for frequently toggled content

x-ifconditionaltemplaterendering

More Alpine.js tasks