Alpine.js x-match: Multiple root elements with conditional rendering

by rameel

HTML

<div x-data="{ status: 'active' }">
  <select x-model="status">
    <option value="active">Active</option>
    <option value="disabled">Disabled</option>
    <option value="anonymous">Anonymous</option>
  </select>

  <template x-match>
    <template x-case="status === 'active'">
      <h2>Welcome!</h2>
      <p>You have full access to all features.</p>
      <a href="#dashboard">Dashboard</a>
    </template>

    <template x-case="status === 'disabled'">
      <h2>Inactive Account</h2>
      <p>Please activate your account to continue.</p>
    </template>

    <template x-default>
      <h2>Guest Mode</h2>
      <p>Sign up to unlock more features!</p>
      <button>Sign Up</button>
    </template>
  </template>
</div>

<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-match@1/alpinegear-match.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>