# Forgot password

> Step 1. The user enters their email to get a reset link.

URL: https://apogee.avaui.dev/docs/forgot-password-pages/forgot-password
Last updated: 2026-10-15

Step 1. The user enters their email to get a reset link.

Last updated October 15, 2026

Live example: https://apogee.avaui.dev/examples/forgot-password/forgot-password

```astro
---
/**
 * Forgot password: Step 1. The user enters their email to get a reset link.
 *
 * @page forgot-password
 */
import { KeyRound, ArrowLeft } from '@lucide/astro'
import AuthShell from '@/components/apogee/sections/AuthShell/AuthShell.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Button from '@/components/apogee/Button/Button.astro'
---

<AuthShell heading="Forgot password?" description="No worries, we'll send you reset instructions." pattern="grid">
  <FeaturedIcon slot="brand" theme="outline" color="neutral" size="large"><KeyRound /></FeaturedIcon>

  <form method="post" class="flex flex-col gap-6">
    <Input label="Email" type="email" name="email" placeholder="Enter your email" autocomplete="email" required />
    <Button type="submit" size="large" fullWidth>Reset password</Button>
  </form>

  <Button slot="footer" href="#" variant="ghost" color="neutral">
    <ArrowLeft slot="start" class="rtl:-scale-x-100" aria-hidden="true" />
    Back to log in
  </Button>
</AuthShell>
```

## Add

```sh
npx @ava-ui/apogee add forgot-password/forgot-password
```

This copies the page to `src/components/apogee/pages/forgot-password/` with everything it uses: AuthShell, Button, FeaturedIcon, Input. Render it from one of your routes, or use **Copy code** above.

## Accessibility

-   The page heading is the `h1`; the “Back to log in” arrow flips under right-to-left text.
-   The email field has `autocomplete="email"`, so the browser fills it.
-   Say the same thing whether or not the address has an account, so the page does not reveal who is signed up.

## Related

[

Auth shellThe frame of a log in, sign up or recovery page; brand mark, heading and your form, centred, in a card, beside a panel, or beside a step sidebar.

](https://apogee.avaui.dev/docs/sections/auth-shell)[

Featured iconAn icon in a tinted tile, the glyph that leads an empty state, an alert, a stat or a feature card.

](https://apogee.avaui.dev/docs/featured-icon)