Nativ ui
Documentation

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.

Email-based passwordless login.

Two-Factor

Additional verification step.

Best Practices

  1. Email first - Default to email, not username
  2. Show/hide password - Toggle for password visibility
  3. Remember me - Option to stay logged in
  4. Forgot password - Clear link to reset flow
  5. Create account - Link to signup for new users