<h1>Alpine.js Form Example</h1>
    <div x-data="{ username:'', password: '', login : false, error: false }">
        <form x-show="!login" x-on:submit.prevent="error=false;
         if (password === 'pass') 
            login = true; 
         else error = true;" method="post">
            <div>
                <label for="username"><b>Username:</b></label>
                <input x-model="username" type="text" placeholder="Enter Username" name="username" required />
            </div>
            <div>
                <label for="password"><b>Password: </b></label>
                <input x-model="password" type="password" placeholder="Enter Password" name="password" required />
            </div>
            <div>
                <button type="submit">Login</button>
            </div>
        </form>
        <div x-show="login" x-text="`welcome ${username}`"></div>
        <div x-show="!login && error" style="color: red;">Login failed!</div>
    </div>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js