Conditionals — x-if / x-show

x-if adds or removes an element from the DOM (with optional x-else-if /x-else). x-show keeps the element and toggles its display. If the expression throws, an x-if element stays out of the page and an x-show element stays visible. Both apply to a widget use-site exactly as they do to a plain element — see Writing a widget.

<div class="flex items-center gap-2" x-data="{ status: 'active' }">
  <span x-if="status === 'active'" class="...">● Active</span>
  <span x-else class="text-neutral-400">○ Inactive</span>
</div>

<div x-data="{ open: true }">
  <div x-show="open" class="...">
    Still in the DOM — x-show only toggles display.
  </div>
</div>