Auth 3

Sign-in, sign-up, and recovery flows built on native form controls.

Sign in

Email + password card with remember-me, social button, and separator.

Password

---
import { Card, Input, Checkbox, Button, Separator } from "astro-ui";
---

<Card class="block-auth">
  <h3 slot="header">Sign in to your account</h3>
  <div class="block-form">
    <div class="block-field">
      <label for="email">Email</label>
      <Input type="email" name="email" id="email" placeholder="you@example.com" />
    </div>
    <div class="block-field">
      <label for="password">Password</label>
      <Input type="password" name="password" id="password" placeholder="••••••••" />
    </div>
    <div class="block-form-row">
      <Checkbox name="remember" label="Remember me" />
      <a href="/reset" class="block-link">Forgot password?</a>
    </div>
    <Button class="block-btn-full">Sign in</Button>
    <Separator label="or" />
    <Button variant="outline" class="block-btn-full">Continue with GitHub</Button>
  </div>
</Card>

<style is:global>
  .block-auth { max-width: 24rem; width: 100%; margin-inline: auto; }
  .block-form { display: grid; gap: var(--ui-space-3); }
  .block-field { display: grid; gap: var(--ui-space-1); }
  .block-field label { font-size: var(--ui-text-sm); font-weight: var(--ui-font-medium); }
  .block-btn-full { inline-size: 100%; }
  .block-form-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); }
  .block-link { font-size: var(--ui-text-sm); color: var(--ui-primary); }
</style>

Sign up

Registration card with name/email/password fields and terms checkbox.

Card Input Checkbox Button

Full name

Password

I agree to the terms of service

---
import { Card, Input, Checkbox, Button } from "astro-ui";
---

<Card class="block-auth">
  <h3 slot="header">Create your account</h3>
  <div class="block-form">
    <div class="block-field">
      <label for="name">Full name</label>
      <Input name="name" id="name" placeholder="Ada Lovelace" />
    </div>
    <div class="block-field">
      <label for="email">Email</label>
      <Input type="email" name="email" id="email" placeholder="you@example.com" />
    </div>
    <div class="block-field">
      <label for="password">Password</label>
      <Input type="password" name="password" id="password" placeholder="8+ characters" />
    </div>
    <Checkbox name="terms" label="I agree to the terms of service" />
    <Button class="block-btn-full">Create account</Button>
  </div>
</Card>

<style is:global>
  .block-auth { max-width: 24rem; width: 100%; margin-inline: auto; }
  .block-form { display: grid; gap: var(--ui-space-3); }
  .block-field { display: grid; gap: var(--ui-space-1); }
  .block-field label { font-size: var(--ui-text-sm); font-weight: var(--ui-font-medium); }
  .block-btn-full { inline-size: 100%; }
</style>

Forgot password

Compact recovery card — one field, one action, helper text.

Card Input Button

Enter your account email and we'll send a recovery link.

---
import { Card, Input, Button } from "astro-ui";
---

<Card class="block-auth">
  <h3 slot="header">Reset your password</h3>
  <div class="block-form">
    <p class="block-hint">Enter your account email and we'll send a recovery link.</p>
    <div class="block-field">
      <label for="email">Email</label>
      <Input type="email" name="email" id="email" placeholder="you@example.com" />
    </div>
    <Button class="block-btn-full">Send recovery link</Button>
  </div>
</Card>

<style is:global>
  .block-auth { max-width: 24rem; width: 100%; margin-inline: auto; }
  .block-form { display: grid; gap: var(--ui-space-3); }
  .block-field { display: grid; gap: var(--ui-space-1); }
  .block-field label { font-size: var(--ui-text-sm); font-weight: var(--ui-font-medium); }
  .block-btn-full { inline-size: 100%; }
  .block-hint { margin: 0; color: var(--ui-muted-foreground); font-size: var(--ui-text-sm); }
</style>