Login
Login form patterns and best practices.
Basic Login
<div class="min-h-screen flex items-center justify-center">
<div class="w-full max-w-sm p-8">
<h1 class="text-2xl font-bold text-center">Welcome back</h1>
<p class="mt-2 text-center text-muted-foreground">
Sign in to your account
</p>
<form class="mt-8 space-y-4">
<div>
<label class="text-sm font-medium">Email</label>
<input type="email" class="mt-1 w-full rounded-lg border px-3 py-2" />
</div>
<div>
<label class="text-sm font-medium">Password</label>
<input type="password" class="mt-1 w-full rounded-lg border px-3 py-2" />
</div>
<div class="flex items-center justify-between text-sm">
<label class="flex items-center gap-2">
<input type="checkbox" /> Remember me
</label>
<a href="/forgot-password" class="text-primary">Forgot password?</a>
</div>
<button type="submit" class="w-full btn-primary">Sign in</button>
</form>
<p class="mt-6 text-center text-sm text-muted-foreground">
Don't have an account? <a href="/signup" class="text-primary">Sign up</a>
</p>
</div>
</div>Patterns
Social Login
Add OAuth buttons for Google, GitHub, etc.
Magic Link
Email-based passwordless login.
Two-Factor
Additional verification step.
Best Practices
- Email first - Default to email, not username
- Show/hide password - Toggle for password visibility
- Remember me - Option to stay logged in
- Forgot password - Clear link to reset flow
- Create account - Link to signup for new users